我有一些简单的 CSS 和 HTML 只是为了看看媒体查询是否有效。但是出了点问题
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box {
background: red;
width: 100px;
height: 200px
}
/* Mobile Phones */
@media screen and (max-device-width:640px) {
.box {
background: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在移动设备上查看时框背景不会变为蓝色。测试时使用firefox插件“Go Mobile”模拟手机屏幕环境
最佳答案
解决方案:https://jsfiddle.net/r56m37kb/
max-width 而不是 max-device-width
关于css - 媒体查询不会优先，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29553193/