0

したがって、レスポンシブ Web デザインにおける現在の大きな問題の 1 つは、大きな画像を必要としないときにダウンロードすることです。たとえば、電話などで、重大なパフォーマンス ヒットを引き起こします。これは、JS を使用した条件付き読み込みでもある程度発生します。だから私の質問は、メディアクエリ内の背景画像としてほとんどの画像をロードして、より良いものが来るまでこの問題を克服できないでしょうか? 例：

/* base styles */
 @media all and (min-width: 53.75em) {
 header .inner{
 background: url(‘../images/football_bg.png’) bottom right
no-repeat;
}

明らかに、これは完全にセマンティックではありませんが、パフォーマンスの問題を正しく解決できますか?

4

2 に答える 2

1

はい、メディア クエリと背景画像の使用は魅力的なので、プロジェクトに適している場合はぜひ使用してください。

ただし、背景画像を使用できるとは限りません。

この場合、オプションの 1 つはアダプティブ イメージです。これは、訪問者のビューポートに基づいてさまざまなサイズのイメージを提供します。既存のサイトに後付けして、それが機能するかどうかを確認するのは簡単です.

Foundationを使用している場合の別の可能性は、彼らが非常に興味深い似たようなものをリリースしたばかりであるということです: Interchange

幸運を！

于 2013-06-05T23:08:46.023 に答える
1

セマンティクスに本当に関心がある場合は、アダプティブ イメージの使用を検討できます 。http://css-tricks.com/which-responsive-images-solution-should-you-use/

于 2013-06-05T22:59:00.060 に答える