CSS
CSS 媒体特性 prefers-color-scheme

媒体查询(Media queries)非常实用,尤其是当你想要根据设备的大致类型(如打印设备与带屏幕的设备)或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗宽度)来修改网站或应用程序时。

使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。

媒体特性(Media features)描述了 user agent、输出设备,或是浏览环境的具体特征。媒体特性表达式是完全可选的,它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

最常用的媒体特性肯定就是“width"了。今天介绍的这个 CSS 媒体特性是 prefers-color-scheme,使用这个特性,可以根据系统切换页面配色,也就是亮色模式和暗黑模式。

body {
    font-size:30px;
    background: #eee; color: #333; 
}


@media (prefers-color-scheme: dark) {
    body {
        background: #333; color: #eee; 
    }
}


@media (prefers-color-scheme: light) {
    body {
        background: #eee; color: black; 
    }
}


参考:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries#media_features

声明:本站所有文章,如无特殊说明或,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。本站所有图片如无特殊说明均为AI生成。
真诚赞赏,手留余香
赞赏
JavaScript,Node.js
Node.js 使用 Jest 和 supertest 做接口测试
2022-02-22
JavaScript,Node.js
支持 Selector API 的 HTML 解析器 node-html-parser
2022-02-28
Jone
在什么样的花园里面,挖呀挖呀挖
种什么样的种子,开什么样的花
随机推荐
Node.js 的 URL 的模块
Nginx 的 location 设置
CSS3 实现 Switch 开关
支持 Selector API 的 HTML 解析器 node-html-parser
使用 MySQL 线程池对压力测试的影响
JavaScript 和 CSS 检测横屏适配
Node.js 18.x 开始支持内置单元测试
CSS 滚动条样式修改
JavaScript 检查 Date 是否为 Invalid Date
Node.js 使用 Jest 做单元测试

微信联系我

夜间模式切换
回到顶部