了解媒體查詢是CSS中非常重要的一部分，用來針對不同的設備和螢幕尺寸設置不同的樣式。這使得網站可以根據用戶的設備進行響應式設計，從而在手機、平板、桌機等不同裝置上都能有良好的顯示效果。
媒體查詢的運作方式
媒體查詢的工作原理是通過檢測設備的特性，並根據條件應用對應的 CSS 規則。比如根據螢幕的寬度，你可以設置不同的佈局和樣式，從而使網頁在手機和桌面端顯示的方式不同。
常見的媒體查詢條件

1. max-width:設定最大寬度，適用於螢幕寬度小於或等於指定值的設備。
2. min-width:設定最小寬度，適用於螢幕寬度大於或等於指定值的設備。
3. orientation:根據設備的顯示方向（橫向或縱向）調整樣式。
   範例
   假設你想為不同螢幕寬度的設備設置不同的背景顏色，可以使用以下CSS：
4. 小於600px的設備，如手機：這些設備將使用一種樣式，例如淺藍色背景。
5. 601px到1024px的設備，如平板：這些設備將使用另一種樣式，例如淺綠色背景。
   測試不同螢幕尺寸的效果
   要測試媒體查詢對不同螢幕尺寸的效果，你可以使用以下幾種方式：
6. 調整瀏覽器窗口大小：手動調整瀏覽器的寬度，觀察網頁樣式的變化。
7. 開發者工具：大多數瀏覽器（如 Chrome、Firefox）都提供開發者工具，其中包含「設備模擬」功能，允許你模擬不同裝置的螢幕尺寸和解析度。
8. 真實設備測試：在不同設備上打開網頁，檢查是否根據設計做出了響應式調整。
   媒體查詢是實現響應式設計的核心技術，可以確保網頁在不同螢幕上都有最佳的顯示效果。