§ ITPOW >> 文档 >> CSS

作者：vkvi 来源：ITPOW（原创） 日期：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 对它均无效，所以给它也规定一下。