41

このフォームをページのフッターに配置しました (テキスト ボックスとボタンは 1 つだけです)。利用可能なビューポートの幅に基づいて、試して適用したいと思い@mediaます...たとえば、私の場合、このフォームの全幅には約270px程度が必要です。だから私はそれを言うためにCSSを適用したい:

if the width available is at least 270px
     apply first set of CSS rules
else
     apply second set of CSS rules

を使用してこれを行うにはどうすればよい@mediaですか?

4

3 に答える 3

53

には if/else 構文がない@mediaため、同じメディア クエリを 2 つの別々@mediaのルールで繰り返し、notそのうちの 1 つを使用して「else」を意味する必要があります。

あなたの場合、メディアクエリはall and (min-width: 270px). （動作させるにはメディアタイプが必要notです。デフォルトはallそうなので、私はそれを使用しています。）

CSS は次のようになります。

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

@media not all and (min-width: 270px) {
    /* Apply second set of CSS rules */
}

@mediaスタイルをオーバーライドするためのルールを1 つだけ設定して、カスケードを利用するのが一般的な方法の 1 つであることを付け加えておきます。

/* Apply second set of CSS rules */

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

@mediaただし、ルールの外側にオーバーライドされていない (またはオーバーライドできない)スタイルがある場合、これは不十分です。これらのスタイルは引き続き適用され、実際に再宣言する以外に元に戻す方法はありません。再宣言しても元に戻すことができない場合があり、その場合、このメソッドを使用してスタイルを適用することはできません。詳細な説明については、この質問に対する私の回答を参照してください。

この例では、height: 200px宣言は常に適用されます。

.example {
    width: 200px;
    height: 200px;
}

@media all and (min-width: 270px) {
    .example {
        width: 400px;
    }
}

もちろん、それが問題でなければ、メディア クエリの重複を避けるためにこれを使用できます。ただし、厳密な if/else 構文を探している場合はnot、重複したメディア クエリを使用する必要があります。

于 2013-07-14T11:04:48.570 に答える
7

はい。通常、メインの CSS から始めて、幅 (またはメディア タイプ) に基づいてデザインを変更し、以前の CSS を上書きする追加の CSS を使用します。

<style type=text/css">

/* the main css for the site */
.main-content {width:960px;}


/* the css adjustment for the site between two widths */
@media screen and (max-width:600px) and (min-width:271px) {
    .main-content {width:100%;}
}

/* the css adjustment for the site with a max-width of 270px */
@media screen and (max-width:270px) {
    .main-content {width:260px;}
}
</style>
于 2013-07-14T11:16:18.800 に答える