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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
SQL 注入的生命力
Node.js 控制台进度条实现原理
River 主题
WordPress 常用函数 / sanitize_user
wp_signon() 自定义用户登录函数
JavaScript 原生拖放
RESTful API 执行 delete 返回204无法获取 Body
curl 的用法指南