web-dev-qa-db-ja.com

@mediaをif / elseのような方法で使用できますか？

このフォームをページのフッターに配置しました（テキストボックスとボタンが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を使用してこれを行うにはどうすればよいですか？

cssmedia-queries
30
Ahmad

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

あなたの場合、メディアクエリは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_宣言がalwaysに適用されます。

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

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

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

41
BoltClock

はい。通常、メインの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>
3
Shanosha

これがそのシナリオを実装する方法です

<style>
 // apply second set of CSS rules
@media (min-width: 270px) {
 // apply first set of CSS rules
}
</style>

この状況では、メディアクエリ引数が満たされると、事前に適用されたCSSルールが上書きされます。

0
Kevin Lynch