媒体查询参数设置详解

响应式的核心是媒体查询，而媒体查询用的最多的还是浏览器尺寸查询。

浏览器尺寸媒体查询用法总结：

首先设置<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，因为我们不希望用户放大缩小页面）


大多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。
媒体查询可以把浏览器的尺寸定位几个档次：
小屏幕（平板，大于等于768px） 
@media (min-width: 768px) {}
中等屏幕（桌面显示器，大于等于992px）
@media (min-width: 992px) {}
大屏幕（大桌面显示器，大于等于1200px） 
@media (min-width: 1200px) {}


以上3种尺寸的分别方法基本就涵盖了目前设备的尺寸要求了。当然如果还想细分屏幕尺寸的话也是可以的。