2

我正在使用屏幕分辨率为 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 上的窗口大小时触发媒体查询？

4

2 回答 2

7

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

进行中：

@media screen and (max-width : 600px) {
    body { background-color:#F00; }
}
于 2013-07-02T17:05:14.477 回答
0

"I want to use Chrome on my PC"

You can change device-width in the settings of the Chrome Developer Tools. Refresh your page after that and admire the red background ;)

于 2013-07-02T19:25:25.213 回答