自适应网页布局
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)
来设置不同样式