CSS3 Media媒体查询器用法总结（传说中自适应、响应式就靠它了）

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

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

• 加载兼容文件JS

  因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

  <!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->

  为了防止IE浏览器发生诡异事件，还是加上一段“解释”代码

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

以上说的都没啥用（比较泛泛），博主主要是想记录经常使用的知识，精华所在，

超小屏幕（手机，小于 768px）@media (max-width: 768px) { ... }小屏幕（平板，大于等于 768px）@media (min-width: 768px) and (max-width: 768px) { ... }中等屏幕（桌面显示器，大于等于 992px）@media (min-width: 992px) and (max-width: 992px) { ... }大屏幕（大桌面显示器，大于等于 1200px）@media (min-width: 1200px) { ... }

再缩减下，

@media (max-width: 768px) {//手机移动端分辨率}@media (min-width: 768px) and (max-width: 992px) {//PAD中屏分辨率}

有这些就够了，又不是做多么高深的页面，自娱自乐，供大家学习使用。（感觉做个商业版的网站什么的都没问题）