CSS3 手机自适应及媒体查询

1.手机自适应
（1）<meta name="viewport" content="width=device-width,maximum-scale=3.0,width=300,user-scalable=no">
其中：

• name=“viewport” 视口；
• width=device-width 宽度等于视口宽；
• initial-scale=1.0 像素比例；
• maximum-scale=3.0 最大缩放比例；
• minimum-scale=1.0 最小缩放比例；
• user-scalable=no 是否允许用户缩放

注：

• 最大最小缩放比例指用户端的缩放比例；
• 若要对一个网页在不同的端口进行显示，如PC端、手机移动端、iPad等，可采用分区间的方式去写各自的媒体查询，这样不同端口间样式不会相互影响，可减少代码修改的复杂度

（2） 强制性兼容（固定）

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

2.媒体查询
写媒体查询注意：主样式在前 媒体查询在后
条件的写法：有大-小 小-大一套
写法一：

.block{
    height: 2000px;
    border: 1px solid red;
    margin: 0 auto;
}
/*all  screen*/
@media all and (min-width: 768px) and (max-width: 1024px) {
    .block{
        width: 680px;
        background-color: yellow;
    }
}
@media all and (min-width: 1024px) and (max-width: 1380px) {
    .block{
        width: 1024px;
        background-color: blue;
    }
}
@media all and (min-width: 1580px) {
    .block{
        width: 1190px;
        background-color: red;
    }
}

写法二：
不更改主样式

@media all and (min-width: 768px) {
    .block{
        width: 680px;
        background-color: yellow;
    }
}
@media all and (min-width: 1024px) {
    .block{
        width: 768px;
        background-color: blue;
    }
}
@media all and (min-width: 1580px) {
    .block{
        width: 1190px;
        background-color: red;
    }
}

写法三：

@media all and (min-width: 768px) {
    .block{
        width: 680px;
        background-color: yellow;
    }
}
@media all and (min-width: 1024px) {
    .block{
        width: 768px;
        background-color: blue;
    }
}
@media all and (min-width: 1580px) {
    .block{
        width: 1190px;
        background-color: red;
    }
}