media实现响应式网页
响应式网页设计
Responsive Web Design指可以自动识别屏幕宽度，对并对样式做出相应调整通过媒体查询实现在不同屏幕宽度下加载不同的
CSS样式
1 移动端允许网页自动调整
viewport表示视口：浏览器可视区域宽度和高度width=device-width：默认网页宽度等于屏幕宽度initial-scale=1：原始缩放比例为1，即网页占屏幕面积的100%
对于IE6、7、8需要使用Polyfill库：css3mediaqueries.js
2 不使用绝对宽度
网页会根据屏幕宽度调整布局，所以不能使用绝对宽度进行布局。并且不能使用绝对单位的其他元素。
宽度只能使用相对单位
百分数100%、vw和vh视口宽度和视口高度
3 相对大小字体
不能使用绝对单位的元素：字体使用
em、rem等相对单位进行设置
4 响应式图片
自适应网页需要图片实现自动缩放：只需要将设置
max-width: 100%即可
5 流动布局fluid-grid
在布局系统中，各个栅格的位置都是浮动的，并不固定。主要利用
float实现栅格系统
float的元素不会在水平方向溢出overflow，出现水平滚动条；而是直接滚动到前面元素的下方。注意绝对定位的使用，小心
6 media引入不同CSS样式
响应式设计的核心是CSS3引入的
Media Query模块。自动探测屏幕类型及宽度，符合条件时加载CSS样式
Media Query模块有三种引入方式：
6.1 使用link标签
6.2 使用@import
利用
@import url("tinyScreen") screen and (max-width: 400px);满足条件时，可以在现有CSS文件中加载其他的CSS文件
注：@import与link标签的区别：
link属于HTML标签，除引入CSS样式表还有其他作用；@import是CSS提供的一种加载CSS文件的方式link标签可以定义RSS、定义rel连接属性；@import只能加载CSS文件HTML页面被下载并且增量解析，
link标签被增量解析到便开始加载；@import需要等到HTML页面下载完毕才开始加载JavaScript的DOM接口不能操作
@import@import可以在现有CSS文件中引入
6.3 使用@media
在
CSS文件中，使用@media引入一段查询的样式
@media all and (max-width: 768px) { /* 满足查询条件后应用的规则 */} 7 12列栅格布局系统
主要步骤：
定义容器宽度：
100%，必要时可以设置最大宽度max-width。将容器设置为border-box便于设置固定宽度的padding保证行元素不会溢出到其他行：通过前后添加伪元素，清除浮动
设置列宽：根据
100% / 列数，同时设置padding值，用作网格的间距；设置不同列数组合
section的宽度：col-n = col- * n设置响应式网格：根据媒体查询，设置不同的列宽即可，或者应用不同的列宽
-
实现12列栅格系统
/* 使用border-box，便于在百分比宽度容器中设置固定宽度的padding */* {box-sizing: inherit;}html {box-sizing: border-box;}p{margin: 0;}/* 定义容器宽度 */.grid_container { width: 100%; max-width: 1200px;}/* 定义row：行内的元素不会溢出到其他行。利用清除浮动的方式实现 */.row::before,.row::after { content: ""; display: block; clear: both; height: 0; overflow: hidden;}/* 设置列宽：容器宽 / 列数；这里定义12列 *//* 使用浮动进行定位，避免容器内没有内容，为容器设置一个最小高度1px *//* 设置列间距：使用padding。容器使用的是border-box，所以网格水平间距是水平的padding-left与padding-right之和 *//* 垂直间距是padding-top与padding-bottom */[class*='col-'] { float: left; width: 8.33%; min-width: 1px; padding: 10px; }/* 多个网格宽度的组合section */@media screen and (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 {width: 58.33%;} .col-md-8 {width: 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为分界点 */@media screen and (max-width: 768px) { .col-sm-1 {width: 8.33%;} .col-sm-2 {width: 16.66%;} .col-sm-3 {width: 25%;} .col-sm-4 {width: 33.33%;} .col-sm-5 {width: 41.66%;} .col-sm-6 {width: 50%;} .col-sm-7 {width: 58.33%;} .col-sm-8 {width: 66.66%;} .col-sm-9 {width: 75%;} .col-sm-10 {width: 83.33%;} .col-sm-11 {width: 91.66%;} .col-sm-12 {width: 100%;}}/* ------------------------------------------------------------ *//* 内容的样式 */[class*='col-'] > p { height: 50px; line-height: 50px; background: #eee; color: red; border: 1px solid #999;} -
使用：在屏幕小于
768px时，应用col-sm-类的样式。col-4
col-4
col-4
col-3
col-6
col-3
col-1
col-1
col-2
col-2
col-6
添加偏移offset功能
offset的实现思路是利用margin-left实现偏移，距离与列宽相同。只需添加响应式规则中即可
@media screen and (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 {width: 58.33%;} .col-md-8 {width: 66.66%;} .col-md-9 {width: 75%;} .col-md-10 {width: 83.33%;} .col-md-11 {width: 91.66%;} .col-md-12 {width: 100%;} /* 偏移offset */ .col-md-offset-1 {margin-left: 8.33%;} .col-md-offset-2 {margin-left: 16.66%;} .col-md-offset-3 {margin-left: 25%;} .col-md-offset-4 {margin-left: 33.33%;} .col-md-offset-5 {margin-left: 41.66%;} .col-md-offset-6 {margin-left: 50%;} .col-md-offset-7 {margin-left: 58.33%;} .col-md-offset-8 {margin-left: 66.66%;} .col-md-offset-9 {margin-left: 75%;} .col-md-offset-10 {margin-left: 83.33%;} .col-md-offset-11 {margin-left: 91.66%;} .col-md-offset-12 {margin-left: 100%;}} 8 响应式的实现思路
多写
class，在不同条件应用不同的网格；上面例子就是使用这种利用相同的网格，改变网格的宽度；