關(guān)于CSS的媒體查詢

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

基礎語法

媒體查詢的基本結(jié)構(gòu)如下：

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

選項解釋

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

常見媒體特性

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（每英寸點數(shù)）, dpcm（每厘米點數(shù)）或 dppx（每像素點數(shù)）。
• min-resolution 和 max-resolution: 分辨率的最小值和最大值。

方向和比例：

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

顏色和顏色索引：

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

環(huán)境和設備特性：

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

其他特性：

• any-hover: 檢測是否有任何指針設備能懸停。
• any-pointer: 指針精度，如fine、coarse或none。
• hover: 指針是否能懸停。
• pointer: 主要輸入設備的精度。
• inverted-colors: 用戶是否啟用了顏色反轉(zhuǎn)。
• 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像素。

復雜的設計可能需要結(jié)合多個條件，例如：如果視口寬度在大于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;
    }
}

實戰(zhàn)應用

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

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

1. 調(diào)整字體大小以適應小屏幕。

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

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

2. 切換導航欄布局。

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

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


/* 當屏幕寬度至少為768px時，變?yōu)樗讲季?*/
@media (min-width: 768px) {
    .navbar {
        flex-direction: row;
    }
}

3. 隱藏和顯示內(nèi)容。

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

.sidebar {
    display: block;
}


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

4. 優(yōu)化圖片展示。

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

<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. 調(diào)整列布局。

在不同屏幕尺寸下自動調(diào)整網(wǎng)格布局，比如從單列到兩列再到多列布局。

.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);
    }
}

實戰(zhàn)進階

以上示例展示了媒體查詢?nèi)绾螏椭覀兏鶕?jù)不同的設備條件和屏幕尺寸來調(diào)整網(wǎng)頁的視覺表現(xiàn)，從而實現(xiàn)更加靈活和優(yōu)化的響應式設計。當然，還有一些更高級的用法，以實現(xiàn)更細致的設備特性和更精細的布局調(diào)整方面的靈活性。

1. 結(jié)合多個條件調(diào)整布局。

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

@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. 根據(jù)顏色深度調(diào)整圖像。

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

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

4. 動態(tài)調(diào)整字體大小以適應不同的閱讀距離。

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

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

5. 針對不同分辨率和方向優(yōu)化視頻尺寸。

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

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


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

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