我正在使用屏幕分辨率为 1600x900 的 PC。 这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Page title</title>
<style type="text/css">
@media screen and (max-device-width : 600px) {
body { background-color:#F00; }
}
</style>
</head>
<body></body>
</html>
问题是我正在尝试开发该站点的响应版本，并且在开发时我想在我的 PC 上使用 Chrome。我期待当我将浏览器的宽度调整为小于 600 像素时，媒体查询会运行，但它似乎认为我的设备宽度是 1600 像素并且它永远不会改变。如何在我调整 PC 上的窗口大小时触发媒体查询？
最佳答案
从 @media 屏幕和 (max-device-width : 600px) { 中删除“设备”:http://jsfiddle.net/7rSzr/
制作:
@media screen and (max-width : 600px) {
body { background-color:#F00; }
}
关于css - 调整浏览器窗口大小时，Chrome 不会更改设备宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17431436/