阻止页面的所有内容调整大小

Question

我正在尝试阻止页面上的所有内容移动，并在宽度页面小于1350 px时调整大小。最小宽度对此不起作用，我也不知道为什么..那我该怎么办？

在我的CSS代码中，对于width, height, transformation: translate，我使用的是值vmax，而不是px或%。因此，min-width可能无法使用，我所有的元素都因为使用vmax而不断调整大小，因此它们也只是根据窗口大小来调整大小。。：：

我也尝试过，但是仍然不起作用：（

body {
    min-width: 1350px; 
}

The code + preview

（（当我的浏览器宽度小于1350px时，我试图停止优先调整三个白色矩形的大小，但是如果我们告诉页面停止在其小于1350px时调整所有内容的大小，并且仅使用滚动条替换页面上的元素，这将很酷！）

例如this page，当她小于px时，页面停止调整大小并出现滚动条，我希望得到相同的结果，但我不知道该怎么做... < / p>

Answer 1

您正在使用相对于视口的css尺寸。 vmax vmin, vh, vw are relative移至视口，从而对调整窗口大小作出反应。如果要固定尺寸，则应使用em或rem

编辑：如果要防止调整白框的大小，可以添加一个min-width: 450px，以便它们可以增长但不会缩小到一个点之外

Answer 2

vmax与文档大小无关，但与实际浏览器大小有关。在这种情况下，也许像px，rem，em这样的绝对单位是更好的解决方案。

Answer 3

对于常规css，根据窗口的特定宽度，您可以使用媒体查询：

@media only screen and (max-width: 1350px) {
    body {
        background-color: lightblue;
    }
}

这样，您将能够为每个所需的分辨率/规则定义单独的规则。