CSS 媒體查詢是一種技術，它允許我們根據設備的屏幕尺寸、解析度、方向和其他特性來調整網頁的外觀和佈局。這使得網頁設計師能夠針對不同的設備定義不同的樣式，以確保網站在各種環境中都能呈現最佳效果。
媒體查詢的語法非常簡單，它主要是在 CSS 中添加一個 @media 規則，然後在括號中定義特定的條件。以下是一個基本的媒體查詢示例：
@media screen and (max-width: 768px) {
/* 在螢幕寬度小於 768px 時應用的樣式 */
body {
font-size: 14px;
}
.container {
width: 90%;
}
}在這個例子中，我們使用了 @media 規則來指定當屏幕寬度小於 768 像素時應用的樣式。我們將字體大小設定為 14 像素，並將容器的寬度設定為 90%。這樣，當網站在小型設備上瀏覽時，文字會更容易閱讀，容器也會適應螢幕尺寸。
除了屏幕寬度外，媒體查詢還可以根據其他屬性進行條件定義。以下是一些常見的媒體查詢條件：
max-width和min-width：限制屏幕寬度的最大值和最小值。max-height和min-height：限制屏幕高度的最大值和最小值。orientation：定義設備的方向（橫向或縱向）。device-pixel-ratio：設備的像素密度。aspect-ratio：屏幕的寬高比。
使用這些條件，您可以針對不同的設備和環境定義特定的樣式。例如，您可以根據螢幕寬度調整圖像大小，重新排列佈局，隱藏或顯示特定的元素等等。
另一個重要的概念是響應式設計。響應式設計是一種設計方法，它通過使用媒體查詢和其他技術來自動適應不同螢幕尺寸和設備。通過響應式設計，您可以確保網站在各種設備上都具有一致且友好的外觀。
除了提升使用者體驗之外，媒體查詢還對 SEO（搜尋引擎優化）很重要。搜尋引擎經常會根據網站在不同設備上的表現來評估其排名。如果您的網站在移動設備上表現良好，搜尋引擎就會給予更高的排名。因此，使用媒體查詢來優化您的網站，對於提升 SEO 是非常有益的。
總結
CSS 媒體查詢是一種強大的技術，可以讓我們根據不同螢幕尺寸和設備調整網頁的外觀和佈局。這對於提供良好的使用體驗和提升 SEO 非常重要。通過適應性設計和媒體查詢，您可以確保您的網站在各種設備上都能呈現最佳效果，並吸引更多的訪問者。