媒体查询关键代码

head里面的代码

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

媒体查询适应不同屏幕代码

/*只有在PC下才执行的样式*/
@media screen and (min- 992px) {
    h1 {
        font-size: 36px;
        margin: 30px 0 10px 0;
    }
    .box {
        border: 1px solid #a33;
        color: #a33;
        background-color: #fee;
        margin: 10px;
        padding: 10px;
    }
}
/*只有在PAD下才执行的样式*/
@media screen and (min- 768px) and (max- 992px) {
    h1 {
        font-size: 28px;
        margin: 20px 0 10px 0;
    }
    .box {
        border: 1px solid #3a3;
        color: #3a3;
        background-color: #efe;
        margin: 10px;
        padding: 10px;
    }
}
/*只有在PHONE下才执行的样式*/
@media screen and (max- 767px) {
    h1 {
        /*font-size: 28px;
        margin: 20px 0 10px 0;*/
        display: none;
    }
    .box {
        border: 1px solid #33a;
        color: #33a;
        background-color: #eef;
        margin: 10px;
        padding: 10px;
    }
}