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でメディアクエリを使用できますか？

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

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

ありがとう

htmlcsstwitter-bootstrapresponsive-designmedia-queries
17
GusRuss89

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

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

8
Niet the Dark Absol

いいえ、@ 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