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中屏分辨率
  }

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