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

GoDaddy域名转出攻略

目前在国内有很多家域名商,想要转移域名的时候会受到种种阻拦,要你提供各种材料,否则就不给转移。Godaddy虽然是国外的域名商,但是作为全球域名商的老大,它的域名转出还是比较容易的,下面笔者就给大家介绍一下Godaddy域名转出教程。一、域名解锁登录到GoDaddy账户,在“DOMAIN”一栏里选择自己想要转移的域名,点击后面的“Launch”。进入Domain信息后台,找到“Lock”这一行,一

Public @ 2018-12-21 16:00:24

虚拟主机WordPress部署SSL注意事项(301跳转)

1. 在购买SSL证书之前,请先确认您的虚拟主机是否支持SSL证书的安装和部署。 2. 确认证书类型:SSL证书分为DV(域名验证)、OV(组织验证)和EV(扩展验证)三种类型。一般个人网站和小型商务网站可以选择DV证书。 3. SSL证书购买后,在主机控制面板中安装,安装证书需要输入CSR文件和私钥。CSR文件可以在控制面板中生成,私钥请妥善保管。 4. 部署完成后需要进行301跳转,将H

Public @ 2023-06-25 10:50:11

自适应站点如何做到对百度友好

自适应也叫响应式,指可以自动识别屏幕宽度、并做出相应调整的网页设计。目前被越来越多的站点所使用。同时百度也公开宣称鼓励大家用HTML5技术打造在PC站和移动站都能让用户有良好体验的站点。那么自适应站点在代码上需要做出哪些调整可以对百度更加友好呢?我们来看看皮皮鲁网SEO负责人蒋飞的分享。一、什么样的网站适合做自适应自适应网页设计(Responsive Web Design)是指可以自动识别终端设备

Public @ 2013-05-16 15:20:29

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

自适应网页设计是一种技术,通过使用弹性网格布局和媒体查询等技术,让网页能够在不同设备上展示为最佳状态,包括桌面、平板电脑、手机等。这种设计可以让网站的排版、字体、图像和其他元素在不同的设备上得到最佳的显示效果,并提供更好的用户体验。这种设计的好处是可以减少开发和维护网站时需要投入的资源,这是因为开发人员只需创建一个自适应的网站来适应多种设备。

Public @ 2023-03-30 19:00:17

更多您感兴趣的搜索

0.425967s