1. ホーム
  2. 質問と答え
  3. ウェブサイトの背景画像で大画面解像度をサポートするにはどうすればよいですか？

ウェブサイトの背景画像で大画面解像度をサポートするにはどうすればよいですか？

2016-12-01 11 views
2

私は開発したウェブサイトを持っていますが、私は2560 x 1600モニターでそれを見ている人からスクリーンショットを取得しましたが、ちょっとばかげています。サポートする画面解像度の合理的な上限はいくらですか？私は巨大な画像を追加することによって負荷時間に悪影響を与えることに懸念しています。どうすればこれを適切に処理できますか？ウェブサイトの背景画像で大画面解像度をサポートするにはどうすればよいですか？

出典

2016-12-01 CanadaIT

+0

さまざまなサイズの背景画像を複数のバージョンで作成し、メディアクエリを使用して、ビューポートの幅が拡大するにつれてそれらを適用します。このサイトでは、最大幅を選択するのに役立つデスクトップ画面サイズの統計情報を表示しています。http://gs.statcounter.com/#desktop-resolution-ww-monthly-201510-201610-bar –

+0

また、画像を2倍に拡大して設定することもできます数バイトを保存するためにJPG圧縮を0％にするhttps://www.filamentgroup.com/lab/compressive-images.html –

答えて

1

解決策1：このように、（すべてのHTMLの周りの容器を包む）

#innerbody { 
    width: 100%; 
    max-width: 2000px; 
    margin: 0 auto; 
}

このコンテナ内のすべてのHTMLを入れて：最大幅

は、以下のCSSでのコンテナのdivを使用し

<body> 
    <div id="innerbody"> 
    ... your page ... 
    </div> 
</body>

また、「ページ」の終わりの位置をマークするために、微妙な背景色をボディに追加します。

body {background: #eee;} 
#innerbody {background: #fff;}

解決策2：あなただけ（最低）画質を心配している場合は品質

マスク、あなたは（溶液1から）コンテナのdivを追加し、ハッチをオーバーレイするために、このCSSを使用することができます（斜線）。これは、低品質のフルスクリーンビデオによく使用されるトリックですが、背景画像にも使用できます。

#innerbody { 
    width: 100%; 
    background: url(/hatch.png); 
}

解決策3：メディアは、大画面を手に入れた

を照会？あなたは大きなイメージを得るでしょう。小さな画面がありますか？あなたは小さなイメージを得るでしょう。論理的に聞こえる、そう？メディアクエリを使用してこれを実現できます。これは次のようになります。

@media screen and (max-width: 500px) { 
    body { 
    background: url(small_image.jpg); 
    } 
} 
@media screen and (max-width: 1000px) and (min-width: 501px) { 
    body { 
    background: url(medium_image.jpg); 
    } 
} 
@media screen and (max-width: 2000px) and (min-width: 1001px) { 
    body { 
    background: url(big_image.jpg); 
    } 
} 
@media screen and (min-width: 2001px) { 
    body { 
    background: url(really_big_image.jpg); 
    } 
}

これらのメディアクエリのうち1つはtrueになります。そのイメージは役立つだろう。

出典

2016-12-01 19:11:49 JoostS

1

ロード時間の問題を解決するには、訪問者のビューポートサイズに基づいて背景イメージを制御できるように、メディアクエリを使用する方法があります。例えば

@media (max-width: 800px) { 
    .div-with-background{ 
     background-image: url("background-sm.jpg"); 
    } 
} 

@media (max-width: 1200px) { 
    .div-with-background{ 
     background-image: url("background-md.jpg"); 
    } 
} 

@media (min-width: 1201px){ 
    .div-with-background{ 
     background-image: url("background-lg.jpg"); 
    } 
}

画面解像度がサポートするために合理的な上限は何ですか？

あなたの訪問者によって異なります。 Googleアナリティクスをご利用の場合は、ユーザー>技術>ブラウザ& OSと「セカンダリディメンション」で「画面解像度」を検索してください。

出典

2016-12-01 19:44:21

関連する問題

 関連する問題