1

次の状況…  

/* @media screen and (min-width: 480px) */
@media screen and (min-width: 30em) {
     #el { background:red; }
}

/* @media screen and (min-width: 640px) */
@media screen and (min-width: 40em) {
     #el { background:none; }
}

したがって、ビューポートが480pxより小さい場合は#el赤で、ビューポートが広い場合は背景色を適用しないでください。

min-width: 30emこのルールを次のメディアクエリで「リセット」する必要がないように、このルールを適用するためのcssトリックはありますか？

それについてのアイデアや考えは？前もって感謝します！

4

2 に答える 2

4

このようにしてみてください

@media screen and (min-width: 30em) and (max-width: 40em) {
     #el { background:red; }
}

フィドルの例: http://jsfiddle.net/2ySNu/

于 2012-06-14T07:52:19.117 に答える
0

#e1の背景を特定のブレークポイントより下で赤くしたい場合は、 を使用する必要がありますmax-width。特定のブレークポイントよりも大きいビューポートにスタイリング ルールを適用する場合は、 を使用する必要がありますmin-width。あなたの例:@media screen and (min-width: 30em)では、ビューポートが 30em より大きい場合にのみ背景が赤くなります。40em に達すると、(他のルールに基づいて) なしに戻ります。480px 未満のビューポートの背景を設定するには、単純に を使用max-widthします。ビューポートが 480px を超えるとそのルールは適用されないため、「リセット」について心配する必要さえありません。

/* @media screen and (max-width: 480px) */
@media screen and (max-width: 30em) {
    #el { background:red; }
}

min-widthで宣言したルールは、指定したブレークポイント幅よりも広い幅を持つビューポートに適用されることを覚えておいてください。で宣言されたルールはmax-width、ブレークポイント幅より小さい/小さいビューポートに適用されます。

于 2012-06-15T01:00:19.440 に答える