2

デフォルトの宣言を入れてstyle.cssから、すべてのメディアクエリを という別のスタイルシートに入れましenhanced.cssた。

たとえば、次のstyle.cssようなコードを入れます。

.box{height: 600px;}

次にCSSコードを入れてenhanced.css、小さな画面ではボックスの高さが低くなるようにします。

@media only screen and (min-width: 320px) and (max-width: 480px) { .box{height:300px;} }

残念ながら、小さな画面では機能しませんでした。常に のスタイルに従いますstyle.css。私の質問は、上記のようなことはできますか? 別のスタイルシートにデフォルト宣言を配置するには、またはメディアクエリスタイル シートと同じスタイルシートにデフォルト宣言を配置する必要がありますか?

ありがとう。

4

1 に答える 1

4

問題は、セレクターの特異性が等しいことです（@mediaルールには特異性がありません）-両方のルールが1つのクラスセレクターを使用しており（ ） 、前者が優先された後に.boxロードしているためです。通常のルールの前にルールを含めたい場合は、ルールの特異性を高める必要があります-たとえば.style.cssenhanced.css@media.box

@media only screen and (min-width: 320px) and (max-width: 480px) {
    body .box {
        height: 300px;
    }
于 2013-08-16T01:41:13.443 に答える