三、手机自适应以及浏览器的兼容性处理

手机自适应自适应和媒体查询不能一起使用
1.user-scalable=no / yes定义用户是否能够缩放
initial-scale定义初始缩放值
minimum-width定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-width=1.0定义放大最大比例，它必须大于或等于minimum-scale设置
2.Html{font-size:62.5%(10/16*100%)} 1rem=10px
3.rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。如果给了一个绝对大小那么1rem=16px（默认值）这个就会失效。
4.<meta name="viewport" content="width=device-width,maximum-scale=3.0,width=400"/> //1200px以下的屏幕自适应 这里的width不能带单位，否则会报错
5.强制性兼容写法

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

6.在各大浏览器中样式的兼容写法（一个样式要写几种才能让浏览器兼容）

`<style>
    *{
        margin: 0 ;
        padding: 0;
    }
    .block{
        width: 200px;
        /*针对IE*/
        *width:200px;
        +width:200px;
        _width:200px;
        /*border-radius: 10px;*/
        /*/!*IE*!/*/
        /*-ms-border-radius: 10px;*/
        /*/!*火狐*!/*/
        /*-moz-border-radius: 10px;*/
        /*/!*谷歌*!/*/
        /*-webkit-border-radius: 10px;*/
        height: 200px;
        background-color: deeppink;
        margin: 0 auto;
    }
</style>`