CSS 实现电脑中查看手机版网页,也不至于 100% 满屏

作者:vkvi 来源:千一网络(原创) 日期:2021-9-9

通常手机版网页都是 100% 宽度。

但是电脑中看起来,就被拉得太宽了,我们需要在电脑中,最多也就 450px,怎么办呢?

这是别人写给我的代码:

@media screen and (min-width:450px) {
    body { width:450px; }
    .nav { max-width:450px; }
}

当最小宽度是 450px 时,指定 body 宽度为 450px。

我倒是觉得复杂了,如下且不是更简单?

@media screen {
    body { max-width:450px; }
    .nav { max-width:450px; }
}

好了,再看看我们为什么有个 .nav 存在,这是由于我们的 .nav 使用的是 left:0; right:0; 这种方式来撑满屏幕的,body 的 max-width 和 width 对它均无效,所以给它也规定一下。

相关文章