開發人員工具提示：如何使用開發人員工具模擬 CSS 使用者偏好媒體功能

Sofia Emelianova

使用者偏好設定媒體功能可讓您根據使用者的特定偏好和需求，設定合適的網頁體驗。也就是說，偏好設定媒體功能可讓您根據使用者的期望調整使用者體驗。

下列三個步驟有助於提升網站的使用者體驗：

1. 探索無限可能。瞭解所有使用者偏好媒體功能。
2. 設定網頁體驗樣式。例如實作顏色、版面配置和元素大小根據偏好設定變更。
3. 測試 UI。在DevTools中模擬偏好設定，並測試網站的運作方式。

開發人員工具支援多種模擬選項。為了避免搜尋及調整系統和瀏覽器設定，開發人員工具的「轉譯」分頁會列出所有模擬選項。

使用者偏好設定的模擬選項包括但不限於：

• prefers-color scheme：淺色或深色色彩配置
• prefers-contrast：較低或較高對比
• prefers-reduced-motion：最小化動態範圍
• prefers-reduced-data：使用較少流量或

如需所有模擬選項的完整清單，請參閱「模擬 CSS 媒體功能」一文。

如要探索更多可透過「轉譯」分頁套用的特效，請參閱「算繪」分頁總覽。

此外，有了開發人員工具，你的測試功能並不侷限於你正在使用的單一裝置。您可以使用裝置模式模擬行動裝置。