定義CSS媒體查詢

Question

以下媒體查詢在移動設備和計算機上的行爲是否完全相同或有什麼不同？

@media only screen and (max-width: 480px), 
screen and (max-device-width: 480px){ 
... 
} 

和

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

Answer 1

不，他們不會。這是因爲device-width與width不一樣。如果您的媒體查詢只有width，它們的表現會相同，但是當您引入device-width時，您會得到不同的結果。請參閱我的回答這個問題的更多信息：CSS stylesheet that targets iPhone iPad not working

Answer 2

媒體查詢自己的行爲一樣。但是當他們查詢不同的事情時，他們可能會得到不同的答案。

「唯一屏幕」通常有效，但少數移動設備將自己歸類爲「手持式」而非「屏幕」。 （我個人的傾向是「只有全部」更好，部分原因是它包括手持設備，部分原因是它提供了相同的CSS來打印和呈現[即投影儀]。）

對於第一個近似值，最小/最大寬度是邏輯當前窗口（可能由用戶設置），而最小/最大設備寬度是物理屏幕。 但許多移動設備將而不是返回您在其屏幕尺寸的銷售規格中閱讀的內容。它們中的許多都包含「視口」的概念......你可以修改的東西（使用< meta name =「viewport」content =「...），但通常默認爲比實際屏幕尺寸大得多的東西。理解「視口」將會澄清（也可能回答你的查詢）

此外，由於移動設備通常在更近的距離觀看，因此需要更密集的像素以提供相同的用戶體驗。 「視網膜」顯示器可以說明這一趨勢。）由於像素密度非常高，無論如何，較小的物理尺寸可能會有相當大的像素尺寸（我自己的傾向是認爲最終必須在媒體中考慮密度查詢以產生真正合理的結果。）


在任何情況下，替代媒體查詢，保持了概念，而是不同的實現它，你可能想看看http://www.ckollars.org/alternative-to-media-queries.html