Question

我正在使用屏幕分辨率为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>

问题是我正在尝试开发网站的转发版本，而在开发时我想在我的电脑上使用Chrome。我期待当我将浏览器的大小调整为宽度小于600px时，媒体查询将会运行，但它似乎认为我的设备宽度是1600px并且它永远不会改变。当我在PC上调整窗口大小时如何使它触发媒体查询？

Answer 1

从@media screen and (max-device-width : 600px) {删除“设备”：http://jsfiddle.net/7rSzr/

成功：

@media screen and (max-width : 600px) {
    body { background-color:#F00; }
}

Answer 2

“我想在我的电脑上使用Chrome”

您可以在Chrome开发者工具的设置中更改device-width。之后刷新页面并欣赏红色背景;）

当我调整浏览器窗口大小时，Chrome不会更改设备宽度

2 个答案: