标签：媒体查询 效果 包含 百分比 style color rip 网络 sheet
响应式布局结合了三大理念：
1）用于布局的弹性网络（百分比定义宽度）
2）用于图片和视频的弹性媒体
3）媒体查询
在布局中，需要注意的点有：
1）尽量用min-width/max-width,max-height/min-height代替width,height
2)尽量使用百分比，em为单位代替精确值
3）采用媒体查询
二、媒体查询
IE8以下不支持媒体查询，需要引入
<!-- if lte IE 8>
<script src="response.min.js"></script>
<![endif]-->
媒体查询需要设置断点，常见的断点如480px,769px等。也可以逐渐缩小浏览器的宽度，观察布局效果来引入。
媒体查询引入的方式有两种
1）通过link标签引入
<link rel="stylesheet" href="css/small.css" media="(max-width:480x)">
<link rel="stylesheet" href="css/large.css" media="(min-width:769x)">
<link rel="stylesheet" href="css/large.css" media="(min-width:480px) and max-width(768px)">
2）将查询包含在样式表中
@media(max-width:480px){ } @media(min-width:480px) and (max-width:768px){ } @media(min-width:769px){ }
标签：媒体查询 效果 包含 百分比 style color rip 网络 sheet
原文地址：http://www.cnblogs.com/bobodeboke/p/6235001.html
