使用未定義的CSS媒體查詢

我在研究有關CSS媒體查詢的最佳做法，並找到了Foundation's definition。使用未定義的CSS媒體查詢

正如你所看到的，第一媒體查詢有沒有最小/最大尺寸的定義：

@media只有屏幕{}/*定義移動樣式*/

爲什麼他們使用這個媒體查詢，因爲它沒有定義斷點？這是最佳做法還是應該避免？

謝謝！

它只針對'screen'（顯示）而不是其他媒體，如'print'。寬度和高度不是媒體查詢所使用的唯一事物。 – Turnip

它爲什麼需要斷點？這只是說屏幕而不是打印。在這些例子中，他們正在執行* mobile first *，因此斷點會顯示爲*更大*的屏幕大小。 – jonrsharpe

感謝您的評論傢伙！是啊，你說得對。我只是想知道，在開發響應式網站時，一般CSS（即用於每種屏幕尺寸的規則）應該在媒體查詢之外，還是在媒體查詢之外，如基金會使用的媒體查詢 - 不含屏幕尺寸規格的媒體查詢。那麼在這種情況下，可能只是組織/偏好的問題。 –

該特定媒體查詢適用於所有screen（任何尺寸，方向，長寬比或像素密度）。
screen是一種媒體類型。無論您在媒體查詢中添加什麼內容，都只適用於screen，並且不適用於其他media_type的內容。

這是media_type的list of currently recognized values。他們中的大多數已被棄用。你應該使用（因爲它們很可能是在這裏留下來）的有：

在基金會的傢伙可能應該將該查詢後的評論更改爲更多的e xplicit之一。他們應該可能使用/* General styles, including mobile */而不是/* Define mobile styles */。

看看他們的媒體查詢的結構，你會注意到它是一個移動優先CSS框架。如：您首先定義一般樣式（包括移動設備），並將越來越多的屏幕應用於例外。

2016-10-01 14:13:09

媒體查詢不僅僅是斷點。您可以指定輸出介質，如screen。在這種情況下，只有顯示屏幕纔是目標。您也可以只定位print媒體或具有特定方向或分辨率的媒體。

查看更多關於媒體查詢和媒體類型的信息MDN或w3schools。

2016-10-01 13:44:27 andreas

回答