1

メディアクエリとレスポンシブデザインはまったく新しいもので、私は最初のハードルに陥りました。

私は次のものを持っています：

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}

@media only screen and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}

そして、最大幅：500pxのみが機能します。画面を下に縮小すると、最初の色に変わりますが、さらに100px未満に縮小すると、他に何も起こりません。

どこで失敗しましたか？

ありがとう

解決：

同じ問題を抱えている他の人のために、SeanVieiraによって提供された答えがここにあります。

カスケードは引き続きアクティブなメディアクエリに適用されるため、それらを入れ替えると問題が解決します）デスクトップブラウザがそれほど小さくならない可能性があるため、RoyStanfieldが提案したように100pxから増やしました。

@media only screen and (max-width: 800px) {
    #wrap {
            background: #224466;
    }     
    .entry-title {
        font-size: 2em; 
    }
}

@media only screen and (max-width: 400px) {
    #wrap {
            background: #F00;
    }   
    .entry-title {
        font-size: 1em; 
    }
}
4

4 に答える 4

5

カスケードは、アクティブなメディアクエリにも適用されます（正しく理解している場合）。メディアクエリなしで書いたものを見ると、問題はより明白になります。

#wrap {
        background: #F00;
}

#wrap {
        background: #224466;
}

順序を切り替えると、問題が解決するはずです。

@media only screen and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}
于 2012-09-22T21:06:46.423 に答える
2

通常のデスクトップブラウザを使用している場合は、100pxより小さくできない場合があります。テスト幅を500pxや1000pxなどの大きなサイズに増やしてみてください。

于 2012-09-22T21:03:51.747 に答える
0

min-widthクエリの1つで使用してみると、次のようになります。

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}

@media only screen and (min-width: 101px) and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}
于 2012-09-22T21:16:46.067 に答える
0

これは、CSSのメディアクエリの順序が原因です。順序を変更するか、重ねてみて!importantくださいこれを使用してくださいhttp://jsfiddle.net/fidrizers/8Pmuw/

于 2012-09-22T21:06:35.800 に答える