Categories


Tags


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

近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。很多手机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 {

// 非暗色模式做什么

}

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

来源:月光博客


Public @ 2009-09-11 15:20:28

为什么分配的二级*.gotoip*.com访问提示风险?为什么不申述,如何处理?

问:为什么分配的二级*.gotoip*.com(*.get.vip)访问提示风险?如何处理?答:1.我司会给每个虚拟主机用户分配一个*.gotoip*.com的二级域名,最新分配的为*.get.vip做为调试程序使用。不排除个别网站存在程序漏洞、被挂马、和其他风险,这样就被一些安全软件列入了风险域名,进而造成所有用gotoip*.com(*.get.vip)二级域名访问的客户都会有此提示,但绝大多

Public @ 2012-02-13 15:45:27

访问网站时,图片不显示

访问网站时,图片不显示,可能由以下两个原因造成:一:防盗链设置不正确,如果不熟悉防盗链如何设置,建议直接关闭防盗链功能;二:图片不存在或图片路径不正确,建议检查程序,修复此问题;遇到此问题时,可查看程序设置进行修改。来源:景安

Public @ 2012-04-03 15:45:43

使用自适应的方式隐藏一些链接算作弊吗

因为某种历史原因,我们公司的网站不能做独立的移动端,只能用PC站做自适应。现在我对移动端做了很多修改,主要是隐藏了很多不适合在移动端显示的内容,大概占全部内容的3分1,包括友链和很多内链。这样有可能会被百度惩罚吗?回答:自适应设计的页面在移动端适当隐藏一些不适合手机显示的内容是正常的,不会被百度惩罚。但不要隐藏主体内容和重要链接,不然有cloaking之嫌。隐藏内容的三分之一好像挺多的,那些隐藏的

Public @ 2021-11-14 15:20:30

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?自适应网页设计(Responsive Web Design) 浏览器 设计师 好文分享 第1张手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2

Public @ 2010-08-15 15:20:30

更多您感兴趣的搜索

0.484882s