这并不像我预期的那样有效。我正在桌面浏览器(Chrome、Windows 7)中进行测试。无论浏览器窗口有多大，下面的最大宽度都是 800px。
当浏览器窗口宽度小于1000px时，如何让它改变？
<html>
<head>
<title></title>
<style type="text/css">
.flex-container {
max-width: 800px;
height: 180px;
border: red 2px solid;
}
@media (max-device-width: 1000px) {
.flex-container {
max-width: 400px;
}
}
</style>
</head>
<body>
<div class="flex-container">
</div>
</body>
</html>
最佳答案
使用max-width，而不是max-device-width，除非您只希望它影响某些小型手机，例如屏幕宽度小于 100 像素的手机
@media (max-width: 1000px) {
.flex-container {
max-width: 400px;
}
}
有关更多信息和媒体功能的完整列表(媒体查询括号中的内容)，check out the Mozilla page
关于css - 为什么 @media 查询不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20850184/