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

Question

我创建了一个 div，我希望它是 50%（为了争论），但至少有一定的宽度，最多 100% 的宽度，（这样它就永远不会扩展窗口）

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

基本上，我希望 min-width 起作用，但我希望 max-width 被认为更重要，以便它永远不会比窗口宽，我认为我可以按顺序执行此操作，或者至少可以使用 !重要，但情况似乎并非如此

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

Answer 1

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

工作jsFiddle

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

请注意@lmgonzalves关于最小宽度是“最强”的内容。

Answer 2

只需切换min-width和width的值即可：

.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

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

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

Answer 6

min()函数可以解决问题。 插入您的max-width作为参数。 这样min-width永远不会比你的max-width

min-width: min(500px, 100%);
max-width: 100%;

目前支持除 IE 之外的所有主要浏览器： caniuse.com