0HTML5ロゴWebサイトの応答背景画像

私は最近、自分のWebサイトやWebサーバーを更新し、新しいサイトを追加してきました (LoveCrete.org). 私はLoveCreteに背景画像を持っていると思ったし、もちろんそれを実現します 1 サイズは、すべての画面に適合しません. ここに私の思考だったと私は、多くの画面サイズや向きに対応するためにやったことの概要です.

どちらの向き

私は自分自身で使用されているすべての一般的な解像度の小さなテーブルを作成することで開始しました パソコン そして、タブレット (水平方向で). これはスタートに賢明な場所ですので、ほとんどの画像は、風景の中に利用可能なので、私はこれに焦点を当てることにしました.

私はページの中央に画像を配置し、エッジがいくつかの例では、画面の端から失われてみましょうことを決定しました. 電話が縦向きで使用される場合には、高さに基づいて画像をロードします (ない幅) そして、画像の両方のエッジから多くを失うことになります. 他の方法でそれを行うことは全く異なる形状にトリミング画像を必要とするか、風景画像を有することを意味だろう “タイル” 背の高い画面上, これは望ましいことではありません.

各グループ内にする最大サイズの画像の比は、すべての周りました 1.6 少数のAビットが高いと. シンプルなものを維持するために、私はの比率を使用することにしました 16:10 すべてのイメージのため、それに応じて作るためにサイズを思い付い.

この手段は、ほとんどの場合、画像は画面サイズにぴったりではありません, しかし、すべての画面は非常に近い何かを得るだろうし、何も画面が小さすぎて、何かで終わるんだろう. また、ソース画像をトリミングすることができることを意味します 16:10 一度、その後、複数のサイズを簡単に作成

一般的な風景の解像度グループ

高さメイクの画像注釈
4:316:1016:9
2160288038402400×38404K UHD
1600
1536
1440

2048
1920
2560



2560
1600×2560
1200
1080
1050
1600
1440
1400
1920

1680

1920
1200×1920フルHD 1080pの
960
900
1280
1200
1536
1440

1600
1000×1600
800
768
720

1024
960
1280



1280
800×1280720P
600
576
800
768
960

1024
640×1024
480640768480×768

あなたが見ることができるように、私はかなりの数の解像度をグループ化してきたし、次にようになります 1 そのグループ内の最大の高さに、すべての高さをカバーする画像. 私は、このような高さは通常画面上とペアにされる可能性があります幅必ず画像も最大のために十分な広さであることを確認します. 私のような珍しい構成のアカウントを取っていません 21:9 モニタまたは複数のスクリーン – リミットどこかが存在しなければなりません!

なぜなら CSS ビューポートまたはブラウザのサイズを使用していない画面サイズの横長画面は高さではなく幅を使用する必要があります – ほとんどのシステム上のように、タイトルバーなどの上部と下部を失うのスペース幅は通常、最大化されながら、. しかしながら, 肖像ディスプレイのためには、高さプロパティを使用することをお勧めします. これは次のように行うことができます CSS 画面の向きを識別することができます

ザ· CSS その後、使用、次のように見えます

体{背景リピート: ノー・リピート; 背景アタッチメント: 一定; 背景位置: 中央センター; 背景サイズ: カバー;}

@メディア (最大幅: 768PX) {体 { 背景画像: URL(bg480.jpg); }}
@メディア (最小幅:769PX) と (最大幅: 1024PX) {体 { 背景画像: URL(bg640.jpg); }}
@メディア (最小幅:1025PX) と (最大幅: 1280PX) {体 { 背景画像: URL(bg800.jpg); }}
@メディア (最小幅:1281PX) と (最大幅: 1600PX) {体 { 背景画像: URL(bg1000.jpg); }}
@メディア (最小幅:1601PX) と (最大幅: 1920PX) {体 { 背景画像: URL(bg1200.jpg); }}
@メディア (最小幅:1921PX) と (最大幅: 2560PX) {体 { 背景画像: URL(bg1600.jpg); }}
@メディア (最小幅:2561PX) {体 { 背景画像: URL(../画像/ bg2400.jpg); }}

@メディア (オリエンテーション: 肖像画){
@メディア (最大の高さ: 480PX) {体 { 背景画像: URL(bg480.jpg); }}
@メディア (分の高さ:481PX) と (最大の高さ: 640PX) {体 { 背景画像: URL(bg640.jpg); }}
@メディア (分の高さ:641PX) と (最大の高さ: 800PX) {体 { 背景画像: URL(bg800.jpg); }}
@メディア (分の高さ:801PX) と (最大の高さ: 1000PX) {体 { 背景画像: URL(bg1000.jpg); }}
@メディア (分の高さ:1001PX) と (最大の高さ: 1200PX) {体 { 背景画像: URL(bg1200.jpg); }}
@メディア (分の高さ:1201PX) と (最大の高さ: 1600PX) {体 { 背景画像: URL(bg1600.jpg); }}
@メディア (分の高さ:1601PX) {体 { 背景画像: URL(bg2400.jpg); }}
}

私たちが何かを逃したと思います? 私たちは以下のコメントで教えてください. あなたが購読したい場合は、右上のメニューで購読リンクをご利用ください. また、下記の社会的なリンクを使用してお友達とこれを共有することができます. 乾杯.

返信を残す