如何为完全基于 css 和 vw-units 的 html 站点提供一般最大值？

Question

我建立了一个网站，其中几乎每个元素都以 vw-units 为单位。所以每个元素的文本、填充、边距、高度和宽度都设置在“vw”中。这很好用。

我的问题是应该进行更改，现在该站点不应再缩放超过 1200 像素宽度。这意味着如果屏幕宽度超过 1200 像素，则网站不应填充 100% 的宽度，并且每个元素都应与 1200 像素屏幕宽度上的一样大。

当然，我有一个最大宽度为 1200 像素的 div，但里面的所有内容仍然随着屏幕而增长。

我知道我可以使用 1200px 作为断点，并且我可以再次定义除此之外的每个元素。但这是我想要避免的。

我的问题是：有没有办法修改 css-unit "vw"，使其使用 1200px 作为每个更宽屏幕的基本宽度？

Answer 1

如果您使用的是容器元素，则可以将其设置为max-width，这将不允许元素的宽度超过您指定的数量。

html, body {
    height: 100%;
}
body {
    background-color: #faa;
    width: 100%;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
}
#container {
    background-color: #afa;
    width: 60vw;
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
}
#container p {
    margin: 0;
}

<div id="container">
    <p>This div's width can't go any further than 200 pixels.</p>
</div>