web-dev-qa-db-ja.com

内部CSSでメディアクエリを使用できますか?また、定義した背景画像の読み込みを回避できますか?

私は、各ページにCMSで定義された大きなヒーロー画像が含まれるレスポンシブサイトに取り組んでいます。その背景画像を携帯電話にダウンロードする必要はありません。

私がそれを行うと考えることができる唯一の方法は、次のようにページの先頭にいくつかのインラインCSSを置くことです:

<style type="text/css">
    @media only screen and (min-width: 680px) {
        .hero-image { background-image: url(../images/image.jpg); }
    }
</style>

まず、インラインCSSでメディアクエリを使用できますか?

第二に、これは携帯電話に画像をダウンロードすることを避けますか?

第三に、もっと良い方法はありますか?

ありがとう

17
GusRuss89

はい、<style>タグでメディアクエリを使用できます。 CSSが必要とする場合にのみ画像が読み込まれるため、セレクターに一致するものが何もない場合は、画像を読み込む必要はありません。

ただし、外部CSSファイルにメディアクエリを含める方がよいでしょう。インラインで含める理由はありません。

8

いいえ、@ mediaタグをインライン化できないようです:

これを参照してください: CSS @メディアルールをインラインで配置することは可能ですか?

5
Natalya Hoota

CSSで始まり、jQueryで終わる2ステップのメディアクエリの方が運が良いかもしれません。 divにIDのラベルを付けて、jQueryが見つけられるようにします。プロセスはここで詳細に説明されています: http://www.fourfront.us/blog/jquery-window-width-and-media-queries

1
Dave Kanter