当前位置:
首页 > 技术 > css3 media屏幕自适应宽度

css3 media屏幕自适应宽度

手机、平板设备屏幕尺寸众多,宽度不一,写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。

/* 打印样式 */
@media print {
    color: red;
}

/* 手机等小屏幕手持设备 */
@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 screen and(orientation: landscape) {对应样式
}

css3 media屏幕自适应宽度:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!