如何获得最大宽度来控制最小宽度？

div { 
 
    width: 50%; 
 
    min-width: 200px; 
 
    max-width: 100%; 
 
    height: 100px; 
 
    background-color: red; 
 
}

<div> 
 

 
</div>

如果你缩小你的窗口，使小提琴小于200像素宽，然后检查DIV，你会看到，它仍然是200像素宽，导致页面伸展。

很明显，这是因为我已将min-width设置为200px，但我希望max-width来否定它。如何模仿这种效果？

来源

2017-10-11 mpen

你有没有为屏幕<200像素设计合法使用的情况下，还是你只是好奇，如果这是可能的吗？我的猜测是，这是更多的浏览器，他们如何选择呈现CSS，但我没有任何资源。 –

_“显然这是因为我已经将最小宽度设置为200px，但是我希望max-width来推翻它，我该怎么做？” - - 你不会，因为这是不可能的 - 最小宽度超过max -width [按规范]（https://www.w3.org/TR/CSS21/visudet.html#propdef-min-width）。您所做的是，首先使用媒体查询不要在此条件下应用最小宽度。 – CBroe

@EricDauenhauer特别是不是200px，但是我有一个400-500px左右的用例。此外，当您添加周围div的所有填充时，屏幕不一定非常小。 – mpen

-2

您可以使用！重要。通常情况下，CSS代码开始从左上角读书，去向右和向下直到结束（所以，如果有重复后的CSS代码将覆盖以前的），但把！重要将覆盖 https://jsfiddle.net/699h51od/

HTML

<input type="text"/>

CSS

input { 
    width:500px !important; 
} 
input { 
    width:100px; 
}

来源

2017-10-12 00:00:59 hurtbox

如何获得最大宽度来控制最小宽度？

回答

相关问题