媒体查询（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



真诚赞赏，手留余香

微信支付