1.浏览器查看，可以支持随着 媒体查询 跟着变化，但是APP打包在手机上允许 没有任何变化，
2.在hbuilderx 的预览窗口查询页面 也不支持css颜色的变化
3.第一张是hbuilder 打包的APP效果 第二张图 是浏览器效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="misapplication-tap-highlight" content="no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>测试</title>
<script src="js/mui.min.js"></script>
<style type="text/css">
html,body{
height: 100%;
width: 100%;
margin:0px;
background: url(img/welcome.png) repeat-x;
background-size: 100% 100%;
}
.day { background: #eee; color: black; }
.night { background: #333; color: white; }
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: #2AC845; }
.night.dark-scheme { background: black; color: #2AC845; }
}
@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #e12625; }
.night.light-scheme { background: #eee; color: #e12625; }
}
.day, .night {
display: inline-block;
padding: 1em;
width: 7em;
height: 2em;
vertical-align: middle;
}
</style>
</head>
<body onselectstart="return false;">
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
</body>
</html>
