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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
ReferenceError: __dirname is not defined in ES module scope
macOS 生成 icns 图标
WordPress 自定义模板路径
Linux 中 top 命令的 Load Average 含义
WordPress 设置菜单
WP_REST_Response 返回结果类
WordPress 支持事务
使用 MySQL 线程池对压力测试的影响