media实现响应式网页响应式网页设计响应式网页设计是指能够自动识别屏幕宽度，并对样式做出相应调整通过媒体查询，可以在不同屏幕宽度下加载不同的CSS样式1移动端允许网页自动调整viewport表示视口：浏览器可见区域的宽度和高度width=device-width：默认网页宽度等于屏幕宽度initial-scale=1：原始缩放比例为1，即网页占据100%的屏幕区域。对于IE6、7和8，需要Polyfill库：css3mediaqueries.js2没有绝对宽度的网页会根据屏幕宽度调整布局，所以不能使用绝对宽度进行布局。而其他元素不能使用绝对单位。宽度只能使用相对单位百分比100%，vw和vh视口宽度和视口高度3相对大小字体不能使用绝对单位元素：字体设置有相对单位如em、rem4自适应图片自适应网页需要图片实现自动缩放:justsetmax-width:100%5流体布局fluid-grid在布局系统中，每个网格的位置是浮动的，不是固定的。主要使用float实现网格系统的元素float在水平方向不会溢出，会出现水平滚动条；相反，它将直接滚动到前一个元素的底部。注意绝对定位的使用，小心6Media引入不同的CSS样式响应式设计的核心是CSS3引入的MediaQuery模块。自动检测屏幕类型和宽度，满足条件时加载CSS样式的MediaQuery模块。MediaQuery模块的导入方式有以下三种：6.1使用链接标签6.2使用@import使用@importurl("tinyScreen")屏幕和（最大宽度：400px）；当条件满足时，可以在已有的CSS文件中加载其他CSS文件注：@import和link标签的区别：link属于HTML标签，除了引入CSS样式表外，还有其他作用；@import是CSS提供的一种加载CSS文件的方式。link标签可以定义RSS和rel连接属性；@import只能加载CSS文件。HTML页面下载添加量化分析，link标签增量解析开始加载；@import需要等到HTML页面下载完成后才能加载JavaScriptDOM界面无法操作@import@import可以引入到已有的CSS文件中6.3在CSS文件中使用@media，使用@media引入一种查询样式@mediaalland(max-width:768px){/*满足查询条件后应用的规则*/}712列网格布局系统的主要步骤：定义容器宽度：100%，可以设置最大宽度max-如有必要，宽度。将容器设置为border-box，方便设置定宽padding，保证行元素不会溢出到其他行：通过前后添加伪元素，清除浮动，设置列宽：按100%/个数columns，同时设置padding值，作为净网格间距；设置不同列组合的宽度：col-n=col-*n设置响应式网格：根据媒体查询，设置不同的列宽，或者应用不同的列宽，实现12列网格System/*使用border-box便于在百分比宽度的容器中设置固定宽度的填充*/*{box-sizing:inherit;}html{box-sizing:border-box;}p{margin:0;}/*定义容器宽度*/.grid_container{宽度：100%；max-width:1200px;}/*定义行：行中的元素不会溢出到其他行。通过清除float*/.row::before,.row::after{content:"";实现显示：块；明确：两者；高度：0；overflow:hidden;}/*设置列宽：容器宽度/列数；这里定义12列*//*使用浮动定位，避免容器没有内容，设置容器最小高度为1px*//*设置列间距：使用padding。容器使用了border-box，所以grid的水平间距是水平padding-left和padding-right之和*//*垂直间距是padding-top和padding-bottom*/[class*='col-']{向左飘浮;宽度：8.33%；最小宽度：1px；填充：10px；}/*多个网格宽度的组合部分*/@mediascreenand(min-width:769px){.col-md-1{width:8.33%;}.col-md-2{width:16.66%;}.col-md-3{width:25%;}.col-md-4{width:33.33%;}.col-md-5{width:41.66%;}.col-md-6{width:50%;}.col-md-7{宽度：58.33%；}.col-md-8{宽度：66.66%；}。col-md-9{width:75%;}.col-md-10{width:83.33%;}.col-md-11{width:91.66%;}.col-md-12{width:100%;}}/*不设置样式的具体高度，根据内容展开*//*自适应，以768px为分界点*/@mediascreenand(max-width:768px){.col-sm-1{宽度：8.33%；}.col-sm-2{宽度：16.66%；}.col-sm-3{宽度：25%；}.col-sm-4{宽度：33.33%；}.col-sm-5{宽度：41.66%;}.col-sm-6{宽度：50%;}.col-sm-7{宽度：58.33%;}.col-sm-8{宽度：66.66%;}.col-sm-9{width:75%;}.col-sm-10{width:83.33%;}.col-sm-11{width:91.66%;}.col-sm-12{width:100%;}}/*-------------------------------------*//*内容style*/[class*='col-']>p{height:50px;行高：50px；背景：#eee；红色;border:1pxsolid#999;}使用：当屏幕小于768px时，应用col-sm-class的样式col-4
