您现在的位置是:首页 > 建站建站

手机网页自适应深色模式适配

查看 cc博主 的更多文章cc博主2022-08-17【建站】533人已围观

手机网页自适应深色模式适配 第1张

  近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。很多手机APP应用都已经对深色模式进行了支持,常用的手机应用也在 App Store 的政策压力下对深色模式进行了适配。那么,对于手机网站来说,是否也能支持自适应浅色模式和深色模式,本文将介绍一下手机网页如何开发自适应深色模式适配。

  既然有了系统层级的适配,手机网站的页面就可以读取深色方式开关,从而完成网页的自顺应。CSS推出的 prefers-color-scheme 的 media 选择器,使得网页能够适配深色模式和浅色模式。

  什么是prefers-color-scheme?

  2020年7月31日,W3C发布的 Media Queries Level 5 标准草案 中提到了新的属性 prefers-color-scheme,网页现在可以通过条件规则组来获取浏览器宿系统的暗色模式状态并应用了。也就是说,现在我们可以很简单地实现“暗色模式系统访问的页面是暗色的,亮色模式系统访问的页面是亮色的”。

  prefers-color-scheme提供了两个值;分别是 light 以及 night;顾名思义,light就是白天模式的样式代码,则night是深色模式的样式代码。

  light——浏览器系统使用亮色主题的界面,同时也是默认值,浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值。

  dark——浏览器系统使用暗色主题的界面。

  CSS语法

  @media (prefers-color-scheme: <mode>) {
}

  其中 mode 有如下可能的取值:

  light:浅色模式
dark:深色模式

  CSS样式代码

  @media (prefers-color-scheme: light) {
// 亮色模式样式
}
@media (prefers-color-scheme: dark) {
// 深色模式样式
}

  CSS变量

  除了prefers-color-scheme,我们还要了解CSS变量的功能和用法。

  CSS 变量(CSS variable)又叫做“CSS 自定义属性”(CSS custom properties)。

  变量的声明使用变量名前面要加两根连词线–,变量名大小写敏感。var()函数用于读取变量。var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

  改造现有的网页

  有了这个功能,我们就可以着力改造现有的网页。我们在CSS里将主题颜色使用CSS变量来表示,我们需要定义两组变量,一套深色,一套浅色,使用如下的代码进行处理。

  :root {
  --bg: #FFFFFF;
  --textColor: #000000;
  --borderColor: #2C2C3A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --textColor: #FFFFFF;
    --borderColor: #2C2C3A;
  }
}

  这样,当有人使用手机的深色模式系统主题时候,访问网站的时候,将会自动切换到深色模式。

  只使用 CSS 条件规则很难实现某些需求,我们可以对 window 使用 matchMedia 方法得到的 Media 使用 matches 方法来获取系统暗色模式状态:

  if (window.matchMedia('prefers-color-scheme: dark').matches) {
// 是暗色模式做什么
} else {
// 非暗色模式做什么
}

  通过上面的改造,就可以实现手机端深色和浅色模式的自适应切换。

手机网页自适应深色模式适配 第2张

Tags:usub

文章评论

猜你喜欢

  • 618购机推荐:华为畅享50,超长续航的千元档鸿蒙手机

    业界618购机推荐:华为畅享50,超长续航的千元档鸿蒙手机

    高考结束,高三的学子们即将进入大学,开启人生的下一阶段。进入新的旅途,自然要做好充分准备,完美开启大学生活。华为畅享系列主打“年轻实力派”。最新推出的华为畅享50就特别适合成为你的“开学新装备”,在颜值、续航、屏幕、系统等方面,都有出色表现,也成为众多家长送...

    查看 cc博客 的更多文章2022-06-16465人已围观

    阅读更多
  • 性功能障碍怎么治

    健康问答性功能障碍怎么治

    性功能障碍怎么治,大多数人对此病不感到陌生,但是由于受到几千年封建思想的影响,人们认为性知识就是淫秽下流的思想,导致不能以正确的态度去面对疾病,任其发展下去,因此大家要及早的提高对性功能障碍的认识,以及性功能障碍的治疗。西医治疗:1、专项检测:针对性功能...

    查看 cc博客 的更多文章2022-03-09476人已围观

    阅读更多
  • 治疗勃起性功能障碍该怎么做

    健康问答治疗勃起性功能障碍该怎么做

    勃起障碍一般都是指在性交过程当中男性的阴茎不能够勃起,或者是勃起不够坚挺,不能够完成正常的性行为,勃起障碍一般都会严重影响了性生活的质量,给患者的身心健康都带来了伤害,那么治疗勃起性功能障碍该怎么做呢,下面就一起来了解一下吧。目前治疗勃起功能障碍一般都可以...

    查看 cc博客 的更多文章2022-03-08467人已围观

    阅读更多
  • 美国对俄芯片“华为模式”制裁即将来临,俄中或成患难兄弟

    芯片美国对俄芯片“华为模式”制裁即将来临,俄中或成患难兄弟

    2022年 2月24日,在俄罗斯总统普京的命令下,俄军对乌克兰发动特别军事行动。目前,乌克兰境内多地主要军事设施已被摧毁。本次俄罗斯的军事行动大大刺激了北约国家的神经,使得美国为首的北约成员国和欧洲国家纷纷对俄罗斯宣布制裁。其中,美国商务部宣布的制裁决定中,...

    查看 cc博客 的更多文章2022-02-25539人已围观

    阅读更多
  • 腾讯云数据库的生长与生态

    业界腾讯云数据库的生长与生态

    作为三大基础软件之一的数据库,时隔多年再次迎来资本热捧。这股势头蔓延到整个一、二级市场,Snowflake、MongoDB、Databricks、Clickhouse等公司,市值或者估值都攀上了新高点。其中,2009年MongoDB 1.0正式面世,Clic...

    查看 cc博客 的更多文章2022-01-27502人已围观

    阅读更多
加入组织
广告

   有免费节点资源,我们会通知你!  加入纸飞机订阅群  

×
天气预报查看日历分享网页电报扫码留言评论Telegram