html - 当窗口宽度较高时，使视口(viewport)认为最大宽度为 1200px

Question

我让测试中的网站完全响应。几乎所有元素都可以使用 vw 单元进行扩展。它运行良好，但在 PC 上(窗口宽度 > 1200 像素)网站看起来很糟糕。我想使网站内容居中，两侧有栏。我尝试将 body width 或 max-width 设置为 1200px，但 vw 单位缩放到窗口大小。可以为大众单位设置最大宽度吗？或者我需要为 PC 重新设计页面？我尝试设置，但它在浏览器中没有任何作用。 Screenshot how it looks like when set max-width

Answer 1

除非你愿意使用像 bootstrap 这样的响应式框架，否则你有两个选择:

选项 1:媒体查询

使用媒体查询为不同的分辨率范围设置不同的样式集。例如，此查询中包含的任何内容仅在视口(viewport)宽度大于 1200px 时才会生效:

@media only screen and (min-width : 1200px) {
    .container {
        width:5vw;
    }
}

选项 2:使用 vmin 和 vmax

我喜欢使用的一个技巧是使用 vmin 和 vmax 单位表示尺寸。这基本上允许您使用屏幕的比例来正确缩放。例如:

.container {
    height:100vmin;
}

此元素的高度将等于(视口(viewport)的宽度或高度)中最小的那个。因此它的高度将始终适合视口(viewport)。