自适应网页布局

发表于 更新于 阅读次数： 本文字数： 378 阅读时长 ≈ 1 分钟

1.手机电脑显示一模一样的界面

使用媒体查询判断是横屏还是竖屏
竖屏页面宽度为全屏
横屏页面宽度收窄

2.两套效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (orientation: landscape) {
/* 横屏 */
    body {
        width: 61.8vh;
        margin: auto;
    }
}

@media screen and (orientation: portrait) {
    /* 竖屏 */
    body {
        width: 100vw;
    }
}

手机浏览器的宽度（window.innerWidth）不等于屏幕的分辨率

手机只有400px左右的宽度
可以使用@media screen and (min-width: 600px) 和@media screen and (max-width: 600px) 来设置不同样式