CSS响应式布局

CSS响应式布局–媒体查询

页面缩放设置

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）  
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

IE6/IE7/IE8兼容HTML5

html5shiv.js：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min.js:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

style媒体查询部分

@media 媒体类型 （媒体特性） and  （媒体特性）{你的样式}
@media  all  and ()

最大宽度max-width
@media (max-width:480px){
.xxx{display:none; }
}
最小宽度min-width
@media (min-width:900px){
	.xxx{width: 980px;}
}
多个媒体特性
@media  (min-width:600px) and (max-width:900px){
	body {background-color:red;}
}
适应屏幕设备的尺寸
根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。
@media and (device-width:1024px){ … }

@import url(example.css) screen and (min-device-width:800px);
<link media="screen and (max-device-width:900px)" rel="stylesheet" href="xxx.css"
适应横屏竖屏（orientation—方向）
portrait—竖屏
landscape—横屏
@media  (orientation: portrait) {………}

移动设备媒体查询尺寸

大屏幕，主要是 PC 端
@media (min-width: 1200px) { }
在 992 和 1199 像素之间的屏幕里，中等屏幕，
@media (min-width: 992px) and (max-width: 1199px) { }
小屏幕，主要是 PAD
@media (min-width: 768px) and (max-width: 991px) { }
超小屏幕，主要是手机
@media (min-width: 480px) and (max-width: 767px) { }
微小屏幕，更低分辨率的手机
@media (max-width: 479px) { }