自19年開始，Android和IOS平臺，都開始玩暗黑模式。當然這沒什么不好，但是當我們的頁面被用戶在暗黑模式打開之后，會被那傳統大白色瞬間閃瞎雙眼。
下面會簡單的說一下如何讓頁面支持暗黑模式。
準備
其實，我們只是需要使用到css中的 prefers-color-scheme 媒體查詢。
說明
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>頁面適應黑暗模式</title></head><body class="back"><div class="models"><h1>測試文字</h1></div></body></html>
CSS
.back {background: white; color: #555;text-align: center}@media (prefers-color-scheme: dark) { .back {background: #333; color: white;} .models {border:solid 1px #00ff00}}@media (prefers-color-scheme: light) { .back {background: white; color: #555;} .models {border:solid 1px #2b85e4}}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
