CSS媒體查詢新增的特性怎么使用

這篇文章主要介紹了CSS媒體查詢新增的特性怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS媒體查詢新增的特性怎么使用文章都會有所收獲，下面我們一起來看看吧。

CSS @media 規范

prefers-reduced-motion、prefers-color-scheme、prefers-contrast、prefers-reduced-transparency、prefers-reduced-data  都屬于 CSS @media 規范中的內容，最新的 CSS @media 規范出到了第五版 - Media Queries Level 5。

它們的用法基本一致，像是這樣，與我們常寫的視口媒體查詢類似，以 prefers-reduced-motion 為例子：

.ele {     animation: aniName 5s infinite linear; }  @media (prefers-reduced-motion: reduce) {     .ele {         animation: none;     }

那么，它們都有什么用呢?

prefers-reduced-motion 減弱動畫效果

prefers-reduced-motion 規則查詢用于減弱動畫效果，除了默認規則，只有一種語法取值 prefers-reduced-motion:  reduce，開啟了該規則后，相當于告訴用戶代理，希望他看到的頁面，可以刪除或替換掉一些會讓部分視覺運動障礙者不適的動畫類型。

• 規范原文：Indicates that user has notified the system that they prefer an  interface that removes or replaces the types of motion-based animation that  trigger discomfort for those with vestibular motion disorders.

• vestibular motion disorders  是一種視覺運動障礙患者，中文我只能谷歌翻譯，翻譯出來是前庭運動障礙，我感覺不太對，谷歌了一下是一種會導致眩暈的一類病癥，譬如一個動畫一秒閃爍多次，就會導致患者的不適。

使用方法，還是上面那段代碼：

.ele {     animation: aniName 5s infinite linear; }  @media (prefers-reduced-motion: reduce) {     .ele {         animation: none;     } }

如果我們有一些類似這樣的動畫：

在用戶開啟了 prefers-reduced-motion: reduce 時，就應該把它去掉。那么該如何開啟這個選項呢?MDN --  prefers-reduced-motion 給出的是：

• 在 GTK/Gnome 中，可以通過 GNOME Tweaks (在“通用”或“外觀”菜單中，取決于具體版本) 的配置，設置  gtk-enable-animations 的值為 false

• 可以在 GTK 3 的配置文件中的 [Settings] 模塊下設置 gtk-enable-animations = false

• 在 Windows 10 中：設置 > 輕松獲取 > 顯示 > 在 Windows 中顯示動畫

• 在 Windows 7 中：控制面板 > 輕松獲取 > 計算機更易于查看 > 關閉不必要動畫

• 在 MacOS 中：系統偏好 > 輔助使用 > 顯示 > 減少運動

• 在 iOS 上：設置 > 通用 > 輔助性 > 減少運動

• 在 Android 9+ 上：設置 > 輔助性 > 移除動畫

prefers-color-scheme 適配明暗主題

prefers-color-scheme 還是非常好理解的，它用于匹配用戶通過操作系統設置的明亮或夜間(暗)模式。它有兩個不同的取值：

• prefers-color-scheme: light：

明亮模式

• prefers-color-scheme: dark：

夜間(暗)模式

語法如下，如果我們默認的是明亮模式，只需要適配夜間模式即可：

body {     background: white;     color: black; }  @media (prefers-color-scheme: dark) {     body {         background: black;         color: white;     } }

prefers-contrast 調整內容色彩對比度

prefers-contrast 該 CSS 媒體功能是用來檢測用戶是否要求將網頁內容以更高或者更低的對比度進行呈現。其中：

• prefers-contrast: no-preference：默認值，不作任何變化

• prefers-contrast: less：希望使用對比度更低的界面

• prefers-contrast: more：希望使用對比度更高的界面

以 prefers-contrast: less 為例子，語法如下：

body {     background: #fff; // 文字與背景對比度為 5.74     color: #666; }  // 提升對比度 @media (prefers-contrast: more) {     body {         background: #fff; // 文字與背景對比度為 21         color: #000;     } }

上面只是偽 CSS 代碼，具體可能需要對具體的一些元素進行處理，或者使用 filter: contrast()  全局統一處理

可訪問性 -- 色彩對比度

顏色，也是我們天天需要打交道的屬性。對于大部分視覺正常的用戶，可能對頁面的顏色敏感度還沒那么高。但是對于一小部分色弱、色盲用戶，他們對于網站的顏色會更加敏感，不好的設計會給他們訪問網站帶來極大的不便。

什么是色彩對比度

是否曾關心過頁面內容的展示，使用的顏色是否恰當?色弱、色盲用戶能否正常看清內容?良好的色彩使用，在任何時候都是有益的，而且不僅僅局限于對于色弱、色盲用戶。在戶外用手機、陽光很強看不清，符合無障礙標準的高清晰度、高對比度文字就更容易閱讀。

這里就有一個概念 --  顏色對比度，簡單地說，描述就是兩種顏色在亮度(Brightness)上的差別。運用到我們的頁面上，大多數的情況就是背景色(background-color)與內容顏色(color)的對比差異。

最權威的互聯網無障礙規范 —— WCAG AA規范規定，所有重要內容的色彩對比度需要達到 4.5:1 或以上(字號大于18號時達到 3:1  或以上)，才算擁有較好的可讀性。

檢查色彩對比度的工具

Chrome 瀏覽器從很早開始，就已經支持檢查元素的色彩對比度了。以我當前正在寫作的頁面為例子，Github Issues 編輯頁面的兩個按鈕：

審查元素，分別可以看到兩個按鈕的色彩對比度：

image

可以看到，綠底白字按鈕的色彩對比度是沒有達到標準的，也被用黃色的嘆號標識了出來。

除此之外，在審查元素的 Style 界面的取色器，改變顏色，也能直觀的看到當前的色彩對比度：

prefers-reduced-transparency 減少透明元素

prefers-reduced-transparency 該 CSS 媒體功能是用來檢測用戶是否要求減少網頁中的透明元素：

• prefers-contrast: no-preference：默認值，不作任何變化

• prefers-contrast: reduce：希望界面元素存在盡可能少的透明元素

以 prefers-contrast: reduce 為例子，語法如下：

.ele {     opacity: 0.5; }  // 減少透明元素 @media (prefers-contrast: reduce) {     .ele {         opacity: 1;     } }

不過，這是仍處于實驗室的功能，暫時沒有任何瀏覽器支持該媒體查詢

prefers-reduced-data 減少數據傳輸

對于部分網速較差的地區，或者流量很貴的情況，用戶會希望減少頁面中的流量請求，基于此有了 prefers-reduced-data。

prefers-reduced-data 該 CSS 媒體查詢功能是用于告知用戶代理，希望減少頁面的流量請求。

• prefers-reduced-data: no-preference：默認值，不作任何變化

• prefers-reduced-data: reduce：希望界面元素消耗更少的互聯網流量

以 prefers-reduced-data: reduce 為例子，語法如下：

.ele {     background-image: url(image-1800w.jpg); }  // 降低圖片質量 @media (prefers-reduced-data: reduce) {     .ele {         background-image: url(image-600w.jpg);     } }

當檢測到用戶開啟了 prefers-reduced-data: reduce，我們將提供壓縮度更高，尺寸更小，消耗流量更少的圖片。

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

關于“CSS媒體查詢新增的特性怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS媒體查詢新增的特性怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。