如何防止最小寬度覆蓋最大寬度？

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