Question

我的网页上有三个部分。当我减小窗口大小时，它会继续调整大小。我想在某个时候停止调整大小，以便网页中的内容不会重叠。

这是我的代码：

<div class="section1">

//code here
</div>
<div class="section2">
 // code here
</div>
<div class="section3">
 // code here.
</div>

这是我的css。

.section1{
width:14%;
}
.section2{
    width:26%;
    left:14%;
}
.section3{
    width: 60%;
    left: 40%;

}

我注意到900px宽度的页面内容很好。我用过这句话。

@media (min-width:900px) {
   .section1 {
      width: 5%;
    }    
    .section2{
        width: 28%;
       left: 5%;
    }
    .section3{
        width: 67%;
        left: 33%;
    }    
}

它仍在继续调整到230像素，但我想停止调整为900像素。我是否必须指定宽度（以像素为单位）而不是百分比？

Answer 1

您可以将3 div部分包装到div包装器中，其预定义的硬编码宽度为900px。

HTML Wrapper：

<div class="wrapper">
    <div class="section1">

    //code here
    </div>
    <div class="section2">
     // code here
    </div>
    <div class="section3">
     // code here.
    </div>
</div>

要添加的CSS：

.wrapper {width: 900px}

希望这有助于解决您的问题。

Answer 2

如果设置了最小宽度，则相关元素将仅在此之前调整大小。

示例：

@media (max-width: 900px) { .section1 { width: 5%; minimum-width: 250px; } }

在上面的示例中，一旦您点击900px的视口，元素将相应地调整大小，直到它达到250px的宽度，然后保持该宽度并停止进一步调整大小。

如何使用@media min-wdth和max-width来修复容器的宽度

2 个答案: