1

だから私はレスポンシブデザインを目指しており、すべてのiPhoneを対象とするこの「単純な」メディアクエリを見ました。試してみて、Firefox と Chrome でテストしましたが、どちらもうまくいきませんでした。私はFirefoxで新しい「レスポンシブデザイン」ツールを使用しましたが、うまくいきませんでした。また、Chrome でブラウザ ウィンドウのサイズを変更しようとしましたが、それも失敗しました。どんな助けでも大歓迎です！最初は私のHTMLです：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>CSS Media Queries</title>
        <link rel="stylesheet" type="text/css" href="test.css" media="screen">
    </head>
    <body>

    <p>Hello there, if this is blue, the responsive css is not working, however if it is red, then it is working!</p>
    </body>

</html>

そして今私のCSSのために：

@media only screen and (max-width : 320px) {
body{
    color:red;
    }
}

body{
    color:blue;
}
4

1 に答える 1

3

カスケードの性質上、ルール@mediaが通常の本体ルールよりも優先され、同じ特異性 (1 つのタイプセレクター - body) を持つためオーバーライドされるため、機能しません。たとえば、順序を入れ替えるだけです。

body {
    color:blue;
}    

@media only screen and (max-width: 320px) {
   body {
   color:red;
   }
}

http://jsfiddle.net/Adrift/sCWWD/2/

于 2013-06-24T21:23:56.087 に答える