超越斷點：在 CSS 中利用使用者偏好媒體查詢

如果您建立網站或應用程序，您很可能會使用媒體查詢。這些方便的 CSS 工具可讓您根據裝置的大小調整佈局。它們是響應式設計的關鍵部分。

您可以依照設備的寬度、長寬比、方向等進行查詢。這些都允許您根據所使用的設備微調佈局。

您可能不知道還有其他可用的媒體查詢，可讓您根據使用者的偏好而不是裝置大小和方向來客製化網站或應用程式。

用戶偏好媒體查詢

有幾種處理使用者偏好的媒體查詢。您可以使用這些來微調應用程式的使用者體驗。

具有首選顏色方案的自動深色模式

如今，深色模式無所不在。似乎每個網站現在都有太陽/月亮切換按鈕來在淺色模式和深色模式之間切換。您可以更進一步，使用偏好色彩方案媒體查詢來自動確定使用者的裝置是否使用淺色或深色模式。

它的運作方式如下：像平常一樣定義淺色模式的 CSS 樣式。然後加入媒體查詢prefers-color-scheme: dark。在那裡，添加覆蓋您的燈光模式顏色的 CSS 規則：

提示：使用 CSS 變數建立主題

為了讓生活更輕鬆一些，您可以在主題（一組 CSS 變數）中定義所有顏色。然後在你的prefers-color-scheme: dark塊中，你只需要重新定義變量，而不是重新添加你的CSS選擇器和規則：

使用prefers-reduced-motion 淡化動畫

動畫可以增強應用程式的體驗，但對於有視力或前庭問題的使用者來說，動畫可能會有些困難。為了幫助這些用戶，某些裝置和作業系統在用戶首選項中提供了減少運動的選項。

您可以使用prefers-reduced-motion 媒體查詢來偵測何時為使用者裝置啟用此類選項。然後，您可以使用強度較低的替代動畫（或完全關閉它們）。

這是使用prefers-reduced-motion 關閉動畫的範例。

需要注意的一件事：如果您關閉這樣的動畫，請確保您沒有任何依賴animationend事件的程式碼。當您將動畫設為無時，如上所示，該事件將永遠不會被觸發。

請記住，當喜歡-reduced-motion：減少配對時，您不必關閉動畫！假設您有一個精美的顯示動畫，其中元素彈回視圖。當使用者想要減少運動時，您可以更改此設置，使其成為簡單的淡入動畫。

自適應對比與偏好對比

一些視力困難的使用者可能在其裝置上啟用了增強對比。您可以使用偏好對比媒體查詢來處理此類情況。

如果此媒體查詢匹配，您可以調整對比度以使這些用戶更容易看到內容。

使用 JavaScript 檢查媒體查詢

假設您正在使用 JavaScript 製作動畫 - 例如，您可能正在使用 Web Animations API。由於這些動畫未在 CSS 中定義，因此您無法使用prefers-reduced-motion 媒體查詢關閉它們。

你可以嗎？

是的！您可以使用 window.matchMedia 方法來評估來自 JavaScript 的媒體查詢。媒體查詢會作為參數傳遞，該方法傳回稱為 MediaQueryList 的內容。

這個物件有一個 matches 屬性，它是一個布林值，指示此媒體查詢目前是否符合。根據該值，您可以決定是否要製作動畫。

以下是一個簡單的範例，展示如何使用 window.matchMedia 在 DOM 元素上有條件地呼叫 animate：

對變化做出反應

MediaQueryList 甚至有一個更改事件，如果條件發生變化並且媒體查詢不再適用，則會觸發該事件。

假設您有一些只想在大顯示器上運行的 JavaScript 程式碼。如果使用者的螢幕尺寸較小，則需要跳過此代碼。您可以透過使用最大寬度查詢或類似的方式呼叫 window.matchMedia 來完成此操作。

假設稍後使用者調整了視窗大小，現在您想要執行大螢幕特定的 JavaScript 程式碼。只需監聽 MediaQueryList 的變更事件，您就可以檢查該事件的 matches 屬性以查看新值是什麼。

概括

這些媒體查詢可以幫助您更好地個人化您的網站或應用程式中的使用者體驗。您可以自動套用深色配色方案，甚至可以根據使用者偏好微調動畫和對比度。它們還有助於提高可訪問性，這始終是一個勝利。

它仍處於實驗階段，但您也可以關注prefers-reduced-data 查詢，該查詢將指示使用者的裝置是否有使用較少資料的要求。這可用於提供使用較少數據的替代內容。例如，您可以跳過非必要的圖像（或使用較低解析度的版本）。

以上是超越斷點：在 CSS 中利用使用者偏好媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！