如何獲得最大寬度來控制最小寬度？

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

如何獲得最大寬度來控制最小寬度？

回答

相關問題