2

ひどいタイトルをお詫びします。私はレスポンシブデザインのテクニックを自分で学んでいます。私が読んだすべてのブログでは、モバイルプラットフォーム用のデスクトップサイズの画像のダウンロード、複数の画像の読み込み、またはJavaScriptの必要性に関する問題について話しているようです。 メディアクエリとパディングトップのアスペクト比のトリックを使用して動的なサイズ変更を行う小さなフィドルを作成しました。それは正常に動作し、開始時に正しい画像をロードし（少なくともこの時点ではChromeで）、正しく上下します（表示するにはネットワークモニターを開く必要があります）。

私はそれがうまくいくことを嬉しく思います、しかし私は私のページでこれを使うことについて心配しています-これはグーグルスパイダーで私に深刻な影響を及ぼしますか（それらは画像ではなく背景画像であるため）。ここで明らかに見逃している警告はありますか？

コードはそれが得るのと同じくらい簡単です：

HTML：

<!-- padding top equal to aspect ratio -->
<div style="padding-top:75%;width:100%;" id="image"></div>

CSS：

html, body { margin: 0; padding: 0; }

#image {
  background-repeat: no-repeat;
  background-size:   100%;
  border: 1px solid #000;
}

@media screen and (max-width: 320px) { 
    body { width: 240px; margin: 0 auto; }
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_n.jpg');
}}
@media screen and (max-width: 500px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec.jpg');
}}
@media screen and (max-width: 640px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_z.jpg');
}}
@media screen and (min-width: 641px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_b.jpg');
}}
4

2 に答える 2

4

実際のコンテンツ画像に背景画像を使用することは、意味的に正しくありません。ただし、背景画像をレスポンシブにスタイル設定する方が簡単な場合があります。それはあなたが扱っている状況に大きく依存します。

于 2013-01-10T04:49:19.287 に答える
2

背景画像をコンテンツの写真として使用する場合は注意してください。これらの画像がコンテンツに不可欠な場合、CSS がオフになっていると表示されず (RSS リーダーなど)、代替テキストがないため、スクリーン リーダーの使いやすさは良くありません。検索してもらいたい場合は、SEO の代替テキストも忘れないでください。

ただし、画像が必須ではなく単なる装飾である場合、私の知る限り、背景画像を使用しても問題はありません。

于 2013-01-10T05:11:34.193 に答える