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

Question

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

顺便说一句，在我的css代码上，表示width, height, transformation: translate ，我使用的是值vmax ，而不是px或% 。 所以min-width可能不起作用，我所有的元素都因为使用vmax而不断调整大小，因此它们也只是根据窗口大小来调整大小。

我也尝试过这个，但是仍然不起作用:(

body {
    min-width: 1350px; 
}

代码+预览

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

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

Answer 1

您正在使用相对于视口的CSS尺寸。 vmax vmin，vh，vw相对于视口，因此对调整窗口大小有反应。 如果要固定尺寸，则应使用em或rem

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

Answer 2

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

Answer 3

对于常规css，根据窗口的特定宽度，可以使用media-queries：

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

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