当窗口宽度较大时，使视口认为最大宽度为1200像素

Question

我制作了一个全响应式的网站，几乎所有元素都采用vw单位进行缩放。在移动设备上表现良好，但在PC上（窗口宽度>1200px）则显得很糟糕。我想让网站内容居中显示，两侧有一些条形图。我尝试将body的宽度或max-width设置为1200px，但vw单位会按照窗口大小进行比例缩放。是否可以为vw单位设置max-width？或者我需要重新设计适配PC的页面？我尝试设置 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> ，但在浏览器中没有任何效果。 此处查看设置max-width后的截图

- Mateusz Iwaniszczuk

---

根据您网站的内容，也许您需要专注于桌面优先？移动优先应该仅用于在小屏幕上使用并且键盘不方便的网站。 - Alex McMillan

Answer 1

除非您愿意使用响应式框架（如bootstrap），否则您有两个选择：

选项1：媒体查询

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

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

选项2：使用vmin和vmax

我喜欢使用的一个不错的技巧是使用vmin和vmax单位来设置尺寸。这可以让您使用屏幕的比例来正确缩放。例如：

.container {
    height:100vmin;
}

这个元素的高度将等于视口宽度或高度中较小的那个。因此，它的高度将始终适合视口。

- stelioslogothetis

---

感谢您的回答。由于声望不够，我不能给您+1。 在提出这个问题后，我发现当分辨率> 1200px时，我可以加载其他.css文件，并在该.css中将所有vw视口单位更改为1200px的百分比。例如，如果元素的宽度为15vw，则设置为15％* 1200 px。 - Mateusz Iwaniszczuk

Answer 2

你使用 (VW, VH) 格式化的方式应该可以工作。

这里有一个使用 VW, VH 完全响应式的 <div> 的示例。

.div_scroll
    {overflow-y: scroll;
        display: block;
        left: 0px;
        top: 0px;
        position: absolute; 
        border: 3px solid #dddddd; 
        height: 75vh;
        width: 79vw;
        margin: 0px;
        background-color: white;
        transform: translate(0vw, 14vh);}

您可以指定最小和最大值为

min-width: 10vw; min-height: 10vh; max-width: 10vw; max-height: 10vh;

数字代表视口的百分比。假设您有一个 <div>，希望它最多填充视口的 80%（视口不是显示器而是窗口），您可以这样做：

max-width: 80vw;
max-height: 80vh;

- D3nj1