折腾csdn页面显示

想要实现：

• 全屏浏览时，页面宽度为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.也就是全屏时的状态。