自适应网页布局

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

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

2.两套效果

@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) 来设置不同样式