4

アップデート

フルスクリーンの背景画像があります。これにより、画像が大きく高解像度であるため、モバイル ブラウジングに問題が生じます。

次の問題は Retina ディスプレイのようなもので、設計者/プログラマーはこの問題にどのように対処する準備をしていますか? 画像を切り替える方法についての記事をたくさん見ます。しかし、その後、ピクセル密度と解像度で過度に混乱します。いつ、どこでそれが必要なのか、またそれらを対象とする方法と理由。

例：

*解像度 1900x1080、72dpi のフルスクリーン背景画像。最良の最適化のために、解像度/ピクセル密度ごとにいくつの画像が必要ですか? さらに、このシナリオを考えると、どのライブラリ/プラグイン/シマンティクスがこの状況に取り組むのに最適でしょうか?

最後に、メディアクエリを使用して背景画像をターゲットにして切り替えると、すべての画像がダウンロードされますか? それとも要件が満たされたときだけですか？

@media (min-device-width : 768px) 
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}

@media only screen 
and (min-width : 1824px) {
background-image:url('paper1900.png');
 }

ありがとうスタック

//古い質問は、コメント目的で削除するつもりはありませんでした//

だから私は全画面画像でレスポンシブなウェブサイトを作っています。私が直面している問題は、モバイルでダウンロードするには元の画像が大きすぎることです。

レスポンシブ デザインに慣れていない私は、これが問題であるとは知らず、自分で発見しました。いくつかの記事を読んだ

最高の存在:
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

私の問題は、<picture>タグが公開されているとは思えないということです。これ以上の情報は見つかりません。

これが許可されているかどうかは誰にもわかりませんか？さらに、それを正しく使用する方法に関する詳細情報/ドキュメント。

該当しない場合picture。モバイル帯域幅を肥大化させずに画像をレスポンシブにする「標準的な」説はありますか?

4

1 に答える 1

1

これは、前回のプロジェクトで retinafying を行った方法です。

background-image を使用して、通常の css でデスクトップ用の最初の画像を設定します。

#bg {
  background: image-url('wallpaper_desktop.jpg') center top;
  background-size: 1024px 768px;
}

次に、iphone などの携帯電話のアドレスを指定します。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
  #bg {
    background: image-url('wallpaper_mobile.jpg') center top;
    background-size: 320px 480px;
  }
}

次に、網膜画像の処理について説明します。サイズが 2 倍になった画像を使用します (ファイル名の「@2x」を参照)。

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #bg {
    background: image-url('wallpaper_mobile@2x.jpg') center top;
    background-size: 320px 480px; // Original size
  }
}

Retina ディスプレイを搭載した iPad や MacBook もあるため、高解像度の携帯電話と比較して、より大きな高解像度バージョンを提供することを検討する必要があります。

@media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
  background: image-url('wallpaper_desktop@2x.jpg') center top;
  background-size: 1024px 768px;
}

したがって、通常、画像ごとに 4 つのバージョンを使用しています。2 つのデスクトップ バージョン (1 つは Retina ディスプレイの 2 倍のサイズ) と 2 つのモバイル バージョン (1 つは Retina ディスプレイの 2 倍のサイズ)

ちなみに、追加の画像にメディアクエリを使用する場合、追加のリクエストはありません。

于 2012-07-04T16:15:37.917 に答える