欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Html頁(yè)面支持暗黑模式的實(shí)現(xiàn)

  發(fā)布時(shí)間：2019-12-26 16:20:39   作者：喵先生   我要評(píng)論
這篇文章主要介紹了Html頁(yè)面支持暗黑模式的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

自19年開(kāi)始，Android和IOS平臺(tái)，都開(kāi)始玩暗黑模式。當(dāng)然這沒(méi)什么不好，但是當(dāng)我們的頁(yè)面被用戶在暗黑模式打開(kāi)之后，會(huì)被那傳統(tǒng)大白色瞬間閃瞎雙眼。

下面會(huì)簡(jiǎn)單的說(shuō)一下如何讓頁(yè)面支持暗黑模式。

準(zhǔn)備

其實(shí)，我們只是需要使用到css中的 prefers-color-scheme 媒體查詢。

  1. no-preference 表示用戶未制定操作系統(tǒng)主題。作為布爾值時(shí)，為 false 輸出。
  2. light 表示用戶的操作系統(tǒng)是淺色主題。
  3. dark 表示用戶的操作系統(tǒng)是深色主題。

說(shuō)明
 

  1. 這篇文章發(fā)布的時(shí)候，微信還無(wú)法拿到 prefers-color-scheme 參數(shù)，所以當(dāng)我們?cè)谖⑿胖写蜷_(kāi)頁(yè)面目前不支持暗黑模式。
  2. 此方法只是一個(gè)簡(jiǎn)單demo，可以使用該方法拓展出其他實(shí)現(xiàn)方式。
  3. prefers-color-scheme說(shuō)明
  4. DEMO地址

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>頁(yè)面適應(yīng)黑暗模式</title>
</head>
<body class="back">
<div class="models"><h1>測(cè)試文字</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}
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 純CSS免費(fèi)讓網(wǎng)站擁有暗黑模式切換功能的實(shí)現(xiàn)代碼

    這篇文章主要介紹了純CSS免費(fèi)讓網(wǎng)站擁有暗黑模式切換功能的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-02-22

  • CSS變量實(shí)現(xiàn)暗黑模式的示例代碼

    這篇文章主要介紹了CSS變量實(shí)現(xiàn)暗黑模式的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2020-03-16

  • 詳解Html5項(xiàng)目適配系統(tǒng)深色模式方案總結(jié)

    這篇文章主要介紹了詳解Html5項(xiàng)目適配系統(tǒng)深色模式方案總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一
    2021-04-14

最新評(píng)論