私は、各ページにCMSで定義された大きなヒーローイメージがあるレスポンシブサイトに取り組んでいます。私は携帯電話でその背景イメージをダウンロードする必要はありません。内部のCSSでメディアクエリを使用することはできますか？定義した背景イメージを読み込まないようにしますか？
私はそれを行うに考えることができる唯一の方法はそうのようなページの頭の中でいくつかのインラインCSSを持つことです。
<style type="text/css">
@media only screen and (min-width: 680px) {
.hero-image { background-image: url(../images/image.jpg); }
}
</style>
まず、私はインラインCSSメディアクエリを使用できますか？
第2に、これは携帯端末で画像をダウンロードしないようにしますか？
第3の方法はありますか？
おかげ
はい、あなたは<style>タグでメディアクエリを使用することができます。イメージは、CSSが必要とする場合にのみロードされるため、セレクタに一致するものがなければ、イメージのロードには煩わされません。
外部のCSSファイルにメディアクエリを含める方が良いでしょう。それをインラインで含める理由はありません。
ありがとう。 インラインで含める理由は、CMSによって出力する必要があるためです（ページごとにユニークなヒーローイメージがあります）。 – GusRuss89
私は達成するために同様の方法を使用しました
background-image: url("{{ $resource_path }}/pictures/btn_menu_show.png") –
windmaomao
いいえ、それは表示されることはできませんインライン@mediaタグ：
これを参照してください：あなたは2段階のメディアクエリとのより良い運を持っているかもしれないIs it possible to put CSS @media rules inline?
元の質問の言い回し（少なくとも今日では）は "インライン"と言いますが、コードOPはインラインではなく内部的にメディアクエリーを要求していることを示しています。よくある間違い、私は週に約1回それを作る。 =） – xtoq
、CSSで始まり、1が、 jQueryで終わります。 jQueryがそれらを見つけることができるようにdivでラベルにIDを付けます。このプロセスはここで詳細に説明されています：http://www.fourfront.us/blog/jquery-window-width-and-media-queries
ここで説明する内容はインラインではなく「内部CSS」と呼ばれます。 – Urs
@それを修正して、誤解を招いていた。 –
[CSS @mediaルールをインラインで置くことは可能ですか？]（http://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline） – davidcondrey