文章编号：1386 / 更新时间：2023-04-12 / 浏览：次

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

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

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

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

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

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

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

CSS变量（CSSvariable）又叫做“CSS自定义属性”（CSScustomproperties）。

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

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

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

//是暗色模式做什么

//非暗色模式做什么

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

扫描二维码推送至手机访问。

3浏览自媒体运营与推广

2浏览网站结构优化

2浏览外部链接建设

2浏览自媒体运营与推广

相关标签： 自适应网站、

本文地址：https://www.badfl.com/article/b261e7dc8591ab21e3bd.html

上一篇：免费运营维护网站指南...
下一篇：修改网站域名解析的技巧...