0

このページhttp://thegreatdiscontent.com/adam-lisagorのように、全幅の背景画像を含むヘッダーをよく使用します

背景画像にはどのようなメディア クエリ スタックを使用しますか? ファイルサイズが大きすぎない画像をモバイルデバイスで使用したいのですが、網膜デバイスには網膜画像があります。したがって、Retina mac 用の 1 つの大きなメディア クエリのようなものがあるかもしれません。Retina iPad 用の Retina サイズの非常に圧縮された画像を持つものかもしれません。たぶん、小さなモバイルデバイス、網膜および非網膜用..? それはかなり複雑で、もちろん、さまざまな解像度とさまざまな (想定される) インターネット速度でさまざまな画面サイズをターゲットとする 20 のメディア クエリのリストを作成したくありません。

考え？どのデバイスを優先しますか?

ありがとうございました。

4

2 に答える 2

0

このbackground-sizeプロパティは、使用可能な領域を埋める背景画像を維持するためにうまく機能します。例えば

#header {
    background: url(image.png) no-repeat;
    background-size: cover;
}

ここで説明されているように、画像を大きなサイズで保存できますが、比較的低品質であり、Retina スクリーンを含むすべてのデバイスで適切に表示されます: http://blog.netvlies.nl/design-interactie/retina-revolution/

于 2013-10-08T12:58:16.540 に答える