自19年开始,Android和IOS平台,都开始玩暗黑模式。当然这没什么不好,但是当我们的页面被用户在暗黑模式打开之后,会被那传统大白色瞬间闪瞎双眼。
下面会简单的说一下如何让页面支持暗黑模式。
准备其实,我们只是需要使用到css中的prefers-color-scheme 媒体查询。
HTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>页面适应黑暗模式</title></head><body class=back><div class=models><h1>测试文字</h1></div></body></html>
CSS
.back {background: white; color: #555;text-align: center}@media (prefers-color-scheme: dark) { .back {background: #333; color: white;} .models {border:solid 1px #00ff00}}@media (prefers-color-scheme: light) { .back {background: white; color: #555;} .models {border:solid 1px #2b85e4}}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。