Html网页页面适用黯黑方式的完成

自19年刚开始,Android和IOS服务平台,都刚开始玩黯黑方式。自然这没甚么不太好,可是当大家的网页页面被客户在黯黑方式开启以后,会被那传统式大白色一瞬间闪瞎眼睛。

下面会简易的说1下怎样让网页页面适用黯黑方式。

提前准备

实际上,大家只是必须应用到css中的 prefers-color-scheme 新闻媒体查寻。

  1. no-preference 表明客户未制订实际操作系统软件主题。做为布尔运算值时,为 false 輸出。
  2. light 表明客户的实际操作系统软件是浅色系主题。
  3. dark 表明客户的实际操作系统软件是深色主题。

表明
 

  1. 这篇文章内容公布的情况下,手机微信还没法拿到 prefers-color-scheme 主要参数,因此当大家在手机微信中开启网页页面现阶段不适用黯黑方式。
  2. 此方式只是1个简易demo,可使用该方式扩展出别的完成方法。
  3. prefers-color-scheme表明
  4. DEMO详细地址

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
  <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}
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。