手机分辨率@media自适应网页

/* 手机等小屏幕手持设备 */

@media screen and (min-width: 320px) and (max-width: 480px) {
    body {
        background: yellow;
    }

}

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) {
    body {
        background: blue;
    }
}

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) {
    body {
        background: green;
    }
}

/* 竖屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

未经允许不得转载：安超峰的网站 » 手机分辨率@media自适应网页