您现在的位置是:首页 > 建站建站
手机网页自适应深色模式适配
cc博主2022-08-17【建站】537人已围观
近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。很多手机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 {
// 非暗色模式做什么
}
通过上面的改造,就可以实现手机端深色和浅色模式的自适应切换。
Tags:usub
相关文章
- 薛定谔的 AI 大模型:箱子暂不能打开,但钱还要继续「烧」
- 免费v2ray节点机场推荐-酸酸乳ssr节点账号分享每日更新(2022/8/16)
- 低价也能享高配?后浪云香港服务器2*E5+32G+480G SSD+5IP+10M CN2 仅需799元
- 腾讯幻核宣布停售,负责人王诗沐已离职,并将加盟百度
- 苹果因搜包耽误员工下班赔偿2亿;字节调整抖音电商业务框架:商城淘宝化,运营负责人离职;便利蜂回应大规模关店|雷峰早报
- 亚略特入选国家级专精特新“小巨人”企业名单
- 又一名视觉大牛从大厂离开!阿里 XR 实验室负责人谭平离职
- 黑客大会遇上元宇宙:极客精神的又一次狂欢
- 最新ssr节点账号小火箭分享及v2ray节点订阅链接-12小时更新(2022/8/15)
- 直播预告 | 全新定义业务观测新范式,让稳定更有力量
猜你喜欢
618购机推荐:华为畅享50,超长续航的千元档鸿蒙手机
业界高考结束,高三的学子们即将进入大学,开启人生的下一阶段。进入新的旅途,自然要做好充分准备,完美开启大学生活。华为畅享系列主打“年轻实力派”。最新推出的华为畅享50就特别适合成为你的“开学新装备”,在颜值、续航、屏幕、系统等方面,都有出色表现,也成为众多家长送...
阅读更多性功能障碍怎么治
健康问答性功能障碍怎么治,大多数人对此病不感到陌生,但是由于受到几千年封建思想的影响,人们认为性知识就是淫秽下流的思想,导致不能以正确的态度去面对疾病,任其发展下去,因此大家要及早的提高对性功能障碍的认识,以及性功能障碍的治疗。西医治疗:1、专项检测:针对性功能...
阅读更多治疗勃起性功能障碍该怎么做
健康问答勃起障碍一般都是指在性交过程当中男性的阴茎不能够勃起,或者是勃起不够坚挺,不能够完成正常的性行为,勃起障碍一般都会严重影响了性生活的质量,给患者的身心健康都带来了伤害,那么治疗勃起性功能障碍该怎么做呢,下面就一起来了解一下吧。目前治疗勃起功能障碍一般都可以...
阅读更多美国对俄芯片“华为模式”制裁即将来临,俄中或成患难兄弟
芯片2022年 2月24日,在俄罗斯总统普京的命令下,俄军对乌克兰发动特别军事行动。目前,乌克兰境内多地主要军事设施已被摧毁。本次俄罗斯的军事行动大大刺激了北约国家的神经,使得美国为首的北约成员国和欧洲国家纷纷对俄罗斯宣布制裁。其中,美国商务部宣布的制裁决定中,...
阅读更多腾讯云数据库的生长与生态
业界作为三大基础软件之一的数据库,时隔多年再次迎来资本热捧。这股势头蔓延到整个一、二级市场,Snowflake、MongoDB、Databricks、Clickhouse等公司,市值或者估值都攀上了新高点。其中,2009年MongoDB 1.0正式面世,Clic...
阅读更多