最大寬度241px不能在最小瀏覽器大小下工作

對於240px瀏覽器大小，我有max-width：241px，但當瀏覽器大小爲240px而不是調用max-width：420xpx時，此媒體查詢不會被調用。最大寬度241px不能在最小瀏覽器大小下工作

如何解決這個問題？ Link，這裏的鏈接，Mobile emulator

@media only screen and (max-width:241px){ 
.home-header-div{ height: 750px !important; } 
}

代替

@media screen and (max-width:420px)

來源

2016-04-27 User014019

你的意思是使用'min-width'？ – jbutler483

min-width iin 420px或240px？如果在240像素，我已經做了@ @media唯一屏幕和（最小寬度：241px）'，但它仍然不工作在240px瀏覽器大小:( – User014019

當瀏覽器尺寸爲320x240像素，然後240將被調用，因爲你必須爲它定義規則。媒體查詢將採取的範圍，如果你有定義，那麼它會採取定義的最後一個類似的範圍..

body { 
    background-color:lightgreen; 
} 

@media only screen and (max-width: 500px) { 
    body { 
     background-color:lightblue; 
    } 
} 
@media only screen and (max-width: 490px) { 
    body { 
     background-color:red; 
    } 
}

在此例如顏色爲藍色只爲10px的範圍

來源

2016-04-27 09:59:02

我沒有類似的範圍 – User014019

瀏覽器大小在420它將與420Rule only， –

是的，我正在使用移動模擬器，http://www.studiopress.com/responsive/，你可以在那裏檢查它。在240px指定媒體查詢不起作用 – User014019

240小於兩241和420，因此它符合兩個媒體查詢的標準。這意味着如果您在兩個媒體查詢中將相同的屬性應用於相同的元素，則將使用使用最高specificity的選擇器應用的屬性。如果兩個選擇器具有相同的特異性，則將啓用SS的級聯規則，並使用最後聲明的屬性。

沒有看到您的媒體查詢爲420px，我只能假設後者是你的問題的原因。有兩個解決方案，這將取決於您自己的需求;無論是地方420PX媒體查詢的一個前爲241px，就像這樣：

@media only screen and (max-width:420px){/* styles go here*/} 
@media only screen and (max-width:241px){/* styles go here*/}

或者，添加一個min-width您420PX查詢，像這樣：上面我如何改變max-width

@media only screen and (max-width:240px){/* styles go here*/} 
@media only screen and (min-width:241px) and (max-width:420px){/* styles go here*/}

注在第一個查詢中爲240px，在第二個查詢中使用241px爲min-width; max-width表示窗口寬度必須小於或等於所提供的寬度，而min-width表示窗口必須大於或等於所提供的寬度。所以一個寬度爲240px的窗口將會匹配max-width:240px。並且，通過使下一個媒體查詢的min-width大1px，可以避免任何可能會重新創建原始問題的惡意重疊。

來源

2016-04-27 10:29:29 Shaggy

我已經擁有這個只有@media的屏幕和（最大寬度：420px） @media屏幕和（最大寬度：241px）'，但241px不適用於240像素的瀏覽器大小。我會嘗試第二個選項 – User014019

我試過了你的建議，但仍然是240像素的媒體查詢不起作用 – User014019

你能更新你的問題，請問一個有問題的實際例子嗎？ – Shaggy

最大寬度241px不能在最小瀏覽器大小下工作

回答

相關問題