Question

我创建了一个div，我想要50％（为了论证）但至少有一定的宽度和最多100％的宽度，（因此它永远不会扩展窗口）

.about {
    position:absolute;
    right:0;
    width: 50%;
    min-width: 500px;
    max-width: 100%;
}

基本上，我希望min-width能够工作，但我希望max-width被认为是更重要的，因此它永远不会比窗口宽，我以为我可以按顺序执行此操作，或者至少通过使用！important，但似乎并非如此

https://jsfiddle.net/ex716kam/2/

Answer 1

我已经尝试了几次，但我似乎无法单独使用CSS。我建议使用简单的javascript或媒体查询来使其正常工作。

Working jsFiddle

@media screen and (min-width:1000px){
    .about{
        width:50%;
    }
}

请注意@lmgonzalves写的关于min-width是＆＃34;最强的＆＃34; ..

Answer 2

只需切换最小宽度和宽度的值：

.about {
    position:absolute;
    right:0;
    width: 500px;
    min-width: 50%;
    max-width: 100%;
}

https://jsfiddle.net/8fkbp9d0/

Answer 3

而不是max-width: 100%;使用max-width:100vw;。它不会离开你的窗户。

Answer 4

很难知道您期望在1000px到500px之间的行为，但媒体查询是实现您所需要的最简单的方式：

.about {
    position:absolute;
    right:0;
    width: 50%;
    min-width:500px;
}

@media screen and ( max-width: 500px ){
  .about {
    width: 100%;
    min-width:0;
  }
}

<div class="about">
        <h1>About</h1>
        <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
</div>

Answer 5

尝试此代码，当屏幕宽度在500px到100％的屏幕分辨率之间时，此代码将起作用。

@media (min-width: 500px) and (max-width: 800px)
{
.about {
        position:absolute;
        right:0;
        width: 50%;
    }
}

如何防止最小宽度覆盖最大宽度？

5 个答案: