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 を使用したいということです。ブラウザーの幅を 600px 未満に変更すると、メディア クエリが実行されることを期待していましたが、デバイスの幅が 1600px であると認識しているようで、変更されません。PC でウィンドウのサイズを変更しているときにメディア クエリを起動するにはどうすればよいですか?

4

2 に答える 2

7

から「デバイス」を削除し@media screen and (max-device-width : 600px) {ます: http://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 に答える