【CSS3】媒体查询、手机自适应

一、手机自适应

手机自使应相关语句要写在head标签内
网页的强制性兼容语句（固定）：

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

IE的兼容性样式，如：-ms-border-radius: 10px;
火狐兼容性样式，如：-moz-border-radius: 10px;
谷歌兼容性样式，如： -webkit-border-radius: 10px;

<meta name="viewport" content="width=device-width,maximum-scale=3.0,width=300px,user-scalable=no"/>

name=“viewport” 指视口
width=device-width 宽度等于视口宽
initial-scale=1.0 像素比例
maximum-scale=1.0 最大缩放比例
minimum-scale=1.0 最小缩放比例
user-scalable 是否允许用户缩放
注：（1）最大最小缩放比例指的是用户端的缩放比例；
      （2）若要对一个网页在不同的端口进行显示，如PC端、手机移动端、ipad等，可采用分区间的方式来写各自对应的媒体查询，这样不同端口间样式不会相互影响，可减少代码修改的复杂度。

二、媒体查询

写媒体查询时，应该注意要将主样式写在前面，媒体查询写后面。
条件的写法可分为以下几种方式：
（1）由大到小写，如：

@media all and (max-width: 1380px){
            .block{
                width: 1024px;
                background-color: #6b16ff;
            }
        }
        @media all and (max-width: 1024px){
            .block{
                width: 768px;
                background-color:green;
            }
        }
        @media all and (max-width:768px){
            .block{
                width:600px;
                background-color: yellow;
            }

（2)从小到大写样式，具体写法同从大到小；
（3）写区间的样式（最大最小值），如：

 @media all and (min-width: 1024px) and (max-width: 1380px) {
            .block{
                width: 1024px;
                background-color: #5ce358;
            }
        }
        @media all and (min-width:768px) and (max-width: 1024px) {
            .block{
                width:800px;
                background-color: #c9daff;
            }
        }
        @media all and (min-width:300px) and (max-width: 768px) {
            .block{
                width:450px;
                background-color: #ffeec0;
            }
        }