CSS 媒體查詢

CSS 媒體查詢模組能夠測試和查詢視口值以及瀏覽器或裝置功能，從而根據當前使用者環境有條件地應用 CSS 樣式。媒體查詢用於 CSS @media 規則以及 HTML 和 JavaScript 等其他上下文和語言中。

媒體查詢是響應式設計的關鍵組成部分。它們能夠根據裝置特性的存在或值有條件地設定 CSS 樣式。通常使用基於視口大小的媒體查詢來為具有不同螢幕尺寸的裝置設定適當的佈局——例如，在寬屏上設定三列，在窄屏上設定單列。

其他常見示例包括在列印頁面時增加字型大小和隱藏導航選單，在頁面以縱向或橫向模式檢視時調整段落之間的填充，或者增加按鈕大小以在觸控式螢幕上提供更大的點選區域。

在CSS中，使用@media@規則根據媒體查詢的結果有條件地應用樣式表的一部分。要條件性地應用整個樣式表，請使用@import。

在設計可重用 HTML 元件時，你還可以使用容器查詢，它允許你根據包含元素的大小而不是視口或其他裝置特性來應用樣式。

使用媒體查詢: 介紹媒體查詢、它們的語法以及用於構建媒體查詢表示式的運算子和媒體特性。
學習：媒體查詢基礎: 媒體查詢簡介以及使用它們建立響應式設計的方法。
測試媒體查詢: 描述如何在 JavaScript 程式碼中使用媒體查詢來確定裝置狀態，並設定監聽器以在媒體查詢結果發生變化時通知你的程式碼（例如，當用戶旋轉螢幕或調整瀏覽器大小時）。
使用媒體查詢實現無障礙性: 瞭解媒體查詢如何幫助使用者更好地理解你的網站。
列印: 有助於改進網頁內容列印輸出的技巧和技術。
響應式圖片: 瞭解如何將媒體查詢與 sizes 結合使用，以在網站上實現響應式影像解決方案。