0 
<head>
    <style>
        .cdm-tb { width: 960px; height: 90px; }
    </style>

    <script>
        ChangeCssRule(".cdm-tb", "width", "468px");
        ChangeCssRule(".cdm-tb", "height", "60px");
    </script>
</head>

<body>

    <img src='images/testimage.jpg' class='cdm-tb' alt='test' />

</body>

ChangeCssRule は動作する JS 関数です。しかし、いくつかのメディア クエリを .cdm-tb スタイルに追加すると、CSS ルールの更新が機能しなくなります。

    <style>
        .cdm-tb { width: 960px; height: 90px; }
        @media(min-width: 728px) {.cdm-tb { width: 728px; height: 90px; } }
        @media(min-width: 960px) {.cdm-tb { width: 960px; height: 90px; } }
    </style>

私が理解していないメディアクエリに関する実行順序はありますか? 任意の提案をいただければ幸いです。

4

2 に答える 2

1 
<html>
<head>
<meta name="viewport" content="width=device-width">

</head>
<style>
body{background:#000000;}
.cdm-tb { width: 960px; height: 90px; }
@media screen (min-width: 728px)
{
.cdm-tb { width: 728px; height: 90px;}
}

@media screen (min-width: 960px)
{
.cdm-tb { width: 960px; height: 90px;}
}
</style>
<img src='images/testimage.jpg' class='cdm-tb' alt='test' />

</html>

レスポンシブ デザインのメタ タグ ビュー ポートを追加する必要があります。

于 2013-09-23T17:37:04.953 に答える