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

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

基礎(chǔ)語法

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

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

選項(xiàng)解釋

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

常見媒體特性

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

寬度和高度特性：

• width: 目標(biāo)輸出設(shè)備的視口寬度。
• min-width: 視口寬度的最小值。
• max-width: 視口寬度的最大值。
• height: 目標(biāo)輸出設(shè)備的視口高度。
• min-height: 視口高度的最小值。
• max-height: 視口高度的最大值。

分辨率和像素比：

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

方向和比例：

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

顏色和顏色索引：

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

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

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

其他特性：

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

使用示例

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

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

這段代碼意味著，當(dāng)視口寬度不超過480像素時(shí)，body元素的字體大小會(huì)被設(shè)置為14像素。

復(fù)雜的設(shè)計(jì)可能需要結(jié)合多個(gè)條件，例如：如果視口寬度在大于480，小于1000的時(shí)候，body元素的字體大小會(huì)被設(shè)置為18像素；如果視口寬度大于1000的時(shí)候，body元素的字體大小會(huì)被設(shè)置為22像素

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

實(shí)戰(zhàn)應(yīng)用

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

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

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

在屏幕寬度小于600px時(shí)減小文本的字體大小，以提高閱讀體驗(yàn)。

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

2. 切換導(dǎo)航欄布局。

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

/* 默認(rèn)樣式，可能適用于移動(dòng)端 */
.navbar {
    display: flex;
    flex-direction: column;
}


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

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

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

.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)整列布局。

在不同屏幕尺寸下自動(dòng)調(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);
    }
}

實(shí)戰(zhàn)進(jìn)階

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

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

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

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

2. 使用特性查詢來改變滾動(dòng)行為。

在觸摸屏設(shè)備上啟用更平滑的滾動(dòng)體驗(yàn)。

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

3. 根據(jù)顏色深度調(diào)整圖像。

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

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

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

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

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

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

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

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


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

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