關于CSS的媒體查詢

CSS媒體查詢是CSS層疊樣式表(Cascading Style Sheets)中的一個核心功能，它使得開發者能夠根據不同的設備特性和環境條件來應用不同的樣式規則。這是實現響應式網頁設計的關鍵技術，確保網站或應用能夠在多種設備上，包括桌面、平板、手機等，提供良好的用戶體驗。

基礎語法

媒體查詢的基本結構如下：

@media media-type and (media-feature: value) {
    /* CSS 樣式規則 */
}

選項解釋

• media-type：定義媒體類型，如 screen（用于電腦屏幕、手機屏幕等）、print（用于打印）、speech（用于屏幕閱讀器）。默認值為 all，意味著規則適用于所有類型的媒體。
• media-feature：媒體特性，用來檢查設備的特定條件，比如視口寬度(width)、高度(height)、設備像素比(device-pixel-ratio)、顏色(color)等，這些特性允許你根據不同的設備條件和環境來定制樣式。
• value：媒體特性所對應的值或范圍。
• and, not, only：邏輯操作符，用于結合多個媒體類型或特性，實現更復雜的查詢條件。

常見媒體特性

CSS媒體查詢支持多種媒體特，以下是一些常用的媒體特性的詳細說明：

寬度和高度特性：

• width: 目標輸出設備的視口寬度。
• min-width: 視口寬度的最小值。
• max-width: 視口寬度的最大值。
• height: 目標輸出設備的視口高度。
• min-height: 視口高度的最小值。
• max-height: 視口高度的最大值。

分辨率和像素比：

• device-width 和 device-height: 設備的屏幕物理寬度和高度。
• min-device-width 和 max-device-width: 設備屏幕物理寬度的最小值和最大值。
• min-device-height 和 max-device-height: 設備屏幕物理高度的最小值和最大值。
• resolution: 設備的分辨率，可以是dpi（每英寸點數）, dpcm（每厘米點數）或 dppx（每像素點數）。
• min-resolution 和 max-resolution: 分辨率的最小值和最大值。

方向和比例：

• orientation: 設備的方向，取值為portrait（豎屏）或landscape（橫屏）。
• aspect-ratio: 輸出設備的寬高比，格式為x/y。
• device-aspect-ratio: 設備的屏幕寬高比。

顏色和顏色索引：

• color: 設備的顏色位數。
• min-color 和 max-color: 設備顏色位數的最小值和最大值。
• color-index: 設備的顏色索引數。
• min-color-index 和 max-color-index: 設備顏色索引數的最小值和最大值。

環境和設備特性：

• monochrome: 單色設備的顏色位數。
• grid: 是否為網格設備，如終端。
• scan: 顯示設備的掃描方式，如progressive（逐行掃描）或interlace（隔行掃描）。
• update-frequency: 顯示更新頻率，如slow或fast。

其他特性：

• any-hover: 檢測是否有任何指針設備能懸停。
• any-pointer: 指針精度，如fine、coarse或none。
• hover: 指針是否能懸停。
• pointer: 主要輸入設備的精度。
• inverted-colors: 用戶是否啟用了顏色反轉。
• prefers-color-scheme: 用戶偏好顏色方案，如light、dark或no-preference。
• prefers-reduced-motion: 用戶是否偏好減少動畫或運動。
• prefers-contrast: 用戶的對比度偏好，如no-preference、high或low。

使用示例

假設我們要為寬度小于等于480px的設備設置特定樣式，可以這樣寫：

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

這段代碼意味著，當視口寬度不超過480像素時，body元素的字體大小會被設置為14像素。

復雜的設計可能需要結合多個條件，例如：如果視口寬度在大于480，小于1000的時候，body元素的字體大小會被設置為18像素；如果視口寬度大于1000的時候，body元素的字體大小會被設置為22像素

@media  (min-width: 480px) and (max-width: 1000px) {
    body{
       font-size: 18px;
    }
}
@media  (min-width: 1000px) {
    body{
       font-size: 22px;
    }
}

實戰應用

媒體查詢廣泛應用于響應式設計中，允許開發者根據不同設備的特性和用戶的瀏覽環境，靈活地調整布局、字體大小、圖片尺寸等，確保內容的可讀性和易用性。

以下是幾個CSS媒體查詢的實戰例子，這些示例覆蓋了響應式設計中常見的應用場景：

1. 調整字體大小以適應小屏幕。

在屏幕寬度小于600px時減小文本的字體大小，以提高閱讀體驗。

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

2. 切換導航欄布局。

當屏幕寬度足夠大時，顯示水平導航欄；當屏幕較窄時，將其轉換為垂直折疊式導航。

/* 默認樣式，可能適用于移動端 */
.navbar {
    display: flex;
    flex-direction: column;
}


/* 當屏幕寬度至少為768px時，變為水平布局 */
@media (min-width: 768px) {
    .navbar {
        flex-direction: row;
    }
}

3. 隱藏和顯示內容。

在小屏幕上隱藏某些非核心內容或組件，以減少信息密度，提升用戶體驗。

.sidebar {
    display: block;
}


@media (max-width: 992px) {
    .sidebar {
        display: none;
    }
}

4. 優化圖片展示。

根據屏幕尺寸加載不同分辨率的圖片，節省流量并提升加載速度。

<img src="image-mobile.jpg" srcset="image-desktop.jpg 1024w, image-tablet.jpg 768w" alt="Example Image">


<!-- CSS -->
@media (min-width: 769px) {
    img[src*="mobile"] {
        content: url("image-tablet.jpg");
    }
}


@media (min-width: 1025px) {
    img[src*="tablet"] {
        content: url("image-desktop.jpg");
    }
}

5. 調整列布局。

在不同屏幕尺寸下自動調整網格布局，比如從單列到兩列再到多列布局。

.container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}


@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

實戰進階

以上示例展示了媒體查詢如何幫助我們根據不同的設備條件和屏幕尺寸來調整網頁的視覺表現，從而實現更加靈活和優化的響應式設計。當然，還有一些更高級的用法，以實現更細致的設備特性和更精細的布局調整方面的靈活性。

1. 結合多個條件調整布局。

當屏幕寬度在992px到1199px之間，并且設備處于橫屏狀態時，對頁面布局進行特殊調整。

@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
    .content {
        grid-template-columns: 2fr 1fr;
    }
    .sidebar {
        order: 1;
    }
}

2. 使用特性查詢來改變滾動行為。

在觸摸屏設備上啟用更平滑的滾動體驗。

@media (hover: none) and (pointer: coarse) {
    body {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

3. 根據顏色深度調整圖像。

針對具有高色彩深度顯示的設備提供更高品質的圖像資源。

@media (color-gamut: p3) {
    .high-color-image {
        content: url('image-p3-color-gamut.jpg');
    }
}

4. 動態調整字體大小以適應不同的閱讀距離。

根據設備的像素密度調整字體大小，以確保在不同設備上字體的物理尺寸一致。

@media (min-resolution: 2dppx) {    body {        font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320)));    }}

5. 針對不同分辨率和方向優化視頻尺寸。

在寬屏設備上保持視頻的寬高比，并在窄屏設備上全屏顯示視頻。

@media (min-aspect-ratio: 16/9) {
    video {
        width: 100%;
        height: auto;
    }
}


@media (max-aspect-ratio: 16/9) {
    video {
        width: auto;
        height: 100%;
    }
}

今天分享的內容非常干，也很實用，得空好好消化一下吧。