想要实现：
- 全屏浏览时，页面宽度为70%
- 分屏浏览时，页面宽度为100%
兼顾全屏和分屏的阅读体验
老规矩，先看最终效果：
全屏宽度：
image.png
分屏宽度：
image.png
css代码：
@media screen and (min-width: 1400px) {
#mainBox > main {
display: block!important;
float: none;
margin-left: auto;
margin-right: auto;
width: 70%;
/* 显示宽度 */
/* width: calc(80vw); */
}
}
@media screen and (max-width: 1400px) {
#mainBox > main {
display: block!important;
float: none;
margin-left: auto;
margin-right: auto;
/* width: 70%; */
/* 显示宽度 */
width: 100%;
}
}
本代码使用的显示器尺寸时, 其实没弄明白为啥阈值是1400px. 代码中
min-width表示的是宽度变量的下界，min-width: 1400px表示当前显示页面的宽度大于1400pix.也就是全屏时的状态。
