最小寬度和最大寬度媒體查詢的語法
響應式網頁設計是一種構建網頁的方法，這些網頁可以根據訪問者的屏幕大小動態更改其佈局和外觀。 大屏幕可以接收適合這些較大顯示屏的佈局，而較小的設備（如手機）則可以接收以適合該較小屏幕的方式格式化的同一網站。 這種方法為所有用戶提供更好的用戶體驗，甚至可以幫助提高搜索引擎排名 。 響應式網頁設計的一個重要部分是CSS Media Queries。
媒體查詢就像您的網站CSS文件中的小條件語句，允許您設置某些CSS規則，這些規則只有在滿足特定條件時才會生效 - 例如屏幕大小高於或低於特定閾值時。
媒體查詢在行動
那麼您如何在網站上使用媒體查詢？ 這是一個非常簡單的例子：
- 你將從一個結構良好的HTML文檔開始，它沒有任何視覺樣式（這就是CSS的用途）
- 在您的CSS文件中，您可以像平常一樣開始設計頁面樣式並為網站外觀設置基準。 假設你想要頁面的字體大小為16像素，你可以寫這個CSS：body {font-size：16px; }
- 現在，您可能希望為具有足夠空間的大屏幕增加字體大小。 這是Media Queries啟動的地方。你可以像這樣開始一個媒體查詢：@media screen和（min-width：1000px）{}
- 這是媒體查詢的語法。 它以@media開頭來建立媒體查詢本身。 接下來你設置“媒體類型”，在這種情況下是“屏幕”。 這適用於台式計算機屏幕，平板電腦，手機等。最後，您可以使用“媒體功能”結束媒體查詢。 在我們上面的例子中，這是“中等寬度：1000px”。 這意味著媒體查詢將啟用最小寬度為1000像素寬的顯示。
- 在媒體查詢的這些元素之後，添加一個打開和關閉大括號，類似於您在任何常規CSS規則中所做的操作。
- 媒體查詢的最後一步是在符合條件時添加要應用的CSS規則。 您可以在組成媒體查詢的大括號之間添加這些CSS規則，如下所示：@media screen和（min-width：1000px）{body {font-size：20px; }
- 當滿足媒體查詢條件（瀏覽器窗口至少有1000個像素寬）時，此CSS樣式將生效，將我們網站的字體大小從原來建立的16個像素更改為我們的20像素新值。
添加更多樣式
您可以根據需要在此媒體查詢中放置盡可能多的CSS規則，以調整您網站的外觀。 例如，如果您不僅要將字體大小增加到20像素，而且還要將所有段落的顏色更改為黑色（＃000000），則可以添加以下內容：
@media screen和（min-width：1000px）{body {font-size：20px; } p {color：＃000000; }}添加更多媒體查詢
此外，您可以為每個較大的尺寸添加更多媒體查詢，並將它們添加到樣式表中，如下所示：
@media screen和（min-width：1000px）{body {font-size：20px; } p {color：＃000000; {} @media screen和（min-width：1400px）{body {font-size：24px; }}第一個媒體查詢將以1000像素寬的寬度踢入，將字體大小更改為20像素。 然後，一旦瀏覽器高於1400像素，字體大小將再次變為24像素。 您可以為特定網站添加盡可能多的媒體查詢。
最小寬度和最大寬度
通常有兩種方法來編寫媒體查詢 - 通過使用“最小寬度”或“最大寬度”。 到目前為止，我們已經看到“最小寬度”在行動中。 這會導致媒體查詢在瀏覽器達到最小寬度後生效。 因此，當瀏覽器寬度至少為1000像素時，將使用“min-width：1000px”的查詢。 當您以“移動優先”方式構建網站時，會使用此類媒體查詢。
如果你使用“最大寬度”，它將以相反的方式工作。 一旦瀏覽器低於此大小，媒體查詢“max-width：1000px”將適用。
關於較舊的瀏覽器
媒體查詢的一個挑戰是他們在Internet Explorer的舊版本中缺乏支持。 值得慶幸的是， 有些polyfills可以在這些較舊的瀏覽器中補充對媒體查詢的支持，允許您在今天的網站上使用它們，同時仍然確保在較舊的瀏覽器軟件中顯示該網站不會被破壞。
17/17/17由Jeremy Girard編輯