css3媒体查询

1. 设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
解释：name="viewport"，viewport

用户网页的可视区域
width：控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的css的像素）

initial-scale=1.0：初始的缩放比例（默认设置为1.0）
maximum-scale=1.0：允许用户缩放的最大比例（默认设置为1.0）
minimum-scale=1.0:允许用户缩放的最小比例（默认设置为1.0）
user-scalable=no用户是否可以手动缩放

2. 加载兼容文件js
因为IE8以及以下版本都不支持hmtl5和css3。需要加载两个js文件，来保证代码兼容

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

3. 设置IE渲染方式默认为最高

让IE的文档模式永远都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
chrome=1.如果用户电脑转了chrome插件，可以让电脑里面的IE不管是哪个版本都可以使用webkit引擎V8。

4. css3 media写法
@media screen and (max-width:360px) {

        body{
            background: green
        }
    }
    @media screen and (min-width: 375px) and (max-width: 420px){
        body{
            background: red
        }
        
    }