html - 如何为完全基于带有 vw 单位的 css 的 html 站点提供一般最大值？

Question

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

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

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

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

我的问题是:有没有办法修改 css 单元“vw”，使其在每个比这更宽的屏幕上使用 1200 像素作为基本宽度？

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>