Question

我制作测试中充分响应的网站。几乎所有元素都可以通过vw单位进行扩展。它工作得很好，但在PC（窗口宽度> 1200px）网站看起来很糟糕。我想在中心制作网站内容，边栏上有条形图。我尝试将体宽或最大宽度设置为1200px，但是vw单位缩放到窗口大小。可以为大众单位设置最大宽度吗？或者我需要为PC重新设计页面？我试过设置，但它在浏览器中没有任何作用。 Screenshot how it looks like when set max-width

Answer 1

除非您愿意使用像bootstrap这样的响应式框架，否则您有两种选择：

选项1：媒体查询

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

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

选项2：使用vmin和vmax

我喜欢使用的一个好方法是使用vmin和vmax单位作为维度。这基本上允许您使用屏幕的比率来正确缩放。例如：

.container {
    height:100vmin;
}

此元素的高度将等于任何一个（视口的宽度或高度）最小。因此，它的高度始终适合视口。

Answer 2

使用（VW, VH）格式化的方式应该有效。

以下是<div>完全响应VW, VH

的示例

.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;

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

2 个答案: