17

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

私が考えることができる唯一の方法は、次のようにページの先頭にインライン CSS を配置することです。

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

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

第二に、これによりモバイルでの画像のダウンロードを回避できますか?

第三に、より良い方法はありますか？

ありがとう

4

3 に答える 3

8

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

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

于 2012-10-16T19:27:32.330 に答える
1

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

于 2013-08-04T16:13:48.560 に答える