最小/最大寬度媒體查詢沒有語法意義

我發現（最小寬度/最大寬度）媒體查詢的概念有點混亂。最小/最大寬度媒體查詢沒有語法意義

當然，如果我是設計一個媒體查詢我想說的（僞代碼）....

if(screen.width < 420) 
{ 
    ApplyStyle(); 
}

談論的最小值和最大值的概念沒有任何意義，因爲像div元素這樣的'min-width'是一個命令，不是一個問題。

我知道，當我的屏幕低於420PX以下是真實的......

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


}

我只是不知道爲什麼，因爲最大寬度是我告訴它有。如果我告訴它有什麼東西，爲什麼css檢查它？它肯定已經知道它。

我可能在這裏錯過了語法/語境。有人可以解釋嗎？

來源

2013-08-25 Exitos

我完全贊成你。作爲一名程序員，「if（screen.width <420）'使SOOOO更有意義，並且可以立即理解。 – Jess

min-width在媒體查詢是沒有關係的，你的元素設置min-width屬性，這是兩個不同的東西。

在媒體查詢中min-width: X如果視口的寬度大於或等於X，則實際爲screen.width >= X。顯然max-width然後將等於screen.width <= X

對我來說非常有意義，如果你讀@media screen and (max-width:420px)作爲具有420PX最大寬度的屏幕，所以任何從0到420PX

來源

2013-08-25 18:57:16

我不得不回到這個，並意識到你實際上是正確的答案。最後一句爲我釘了。謝謝！ – Exitos

對不起，我剛剛迷失在所有的原始東西，然後磨練在這裏的最後一句話。我希望沒有難過的感覺！ – Exitos

下面是一個簡單的例子，希望這有助於..

假設我們有以下的媒體查詢網站：

/* #1- Large desktop */ 
@media (min-width: 980px) { ... } 

/* #2- Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* #3- Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* #4- Landscape phones and down */ 
@media (max-width: 480px) { ... }

如果瀏覽器的屏幕尺寸爲1200像素，查詢＃1將被滿足，因爲瀏覽器的最小寬度必須是980px才能顯示該查詢。

比方說我們現在調整瀏覽器，並把它降到250像素一路..查詢＃4是滿意的MAX是480像素..

這裏是查詢的一個簡單的翻譯..

@media (min-width: 980px) { ... }

顯示屏幕是否大於或等於980px

@media (min-width: 768px) and (max-width: 979px) { ... }

顯示屏幕是否大於或等於768px且小於或等於978px

@media (max-width: 767px) { ... }

如果屏幕大於480像素且小於等於767像素，則顯示。

@media (max-width: 480px) { ... }

顯示，如果屏幕小於或等於480像素

使用這些疑問，你將永遠有一個結果，一個查詢總是被滿足。

來源

2013-08-25 18:00:00

這裏的困惑是，有既是min-width CSS屬性和媒體查詢具有相同名稱：

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */ 

.element { min-width: 420px; ...} /* This is setting a property of the selected element */

來源

2013-08-25 18:50:26 Owlvark

最小/最大寬度媒體查詢沒有語法意義

回答

相關問題