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

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

どちらの向き

I star­ted by mak­ing myself a little table of all the com­mon res­ol­u­tions used on パソコン and tab­lets (in hori­zont­al ori­ent­a­tion). I decided to focus on this because most images are avail­able in land­scape so this is a sens­ible place to start.

I decided that I would place images cent­rally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in por­trait ori­ent­a­tion it will load the image based on height (ない幅) そして、画像の両方のエッジから多くを失うことになります. Doing it any oth­er way would mean need­ing images cropped to a totally dif­fer­ent shape or hav­ing a land­scape image “tile” on a tall screen, これは望ましいことではありません.

The ratios of the max­im­um size image to make in each group were all around 1.6 with a few a bit high­er. To keep things sim­pler I decided to use a ratio of 16:10 すべてのイメージのため、それに応じて作るためにサイズを思い付い.

This means in most cases the image will not be a per­fect fit to the screen size, but all screens will get some­thing very close and no screen will end up with some­thing too small. また、ソース画像をトリミングすることができることを意味します 16:10 once and then mul­tiple sizes eas­ily created

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

As you can see I have grouped quite a few res­ol­u­tions and will then make 1 image that will cov­er all heights up to the largest height in that group. I will make sure the image is also wide enough for the max­im­um width such a height might be paired with on a nor­mal screen. I haven’t taken account of unusu­al con­fig­ur­a­tions like 21:9 mon­it­ors or mul­tiple screens — there has to be a lim­it somewhere!

なぜなら CSS uses the view­port or browser size and not the screen size land­scape screens need to use width rather than height — as on most sys­tems the top and bot­tom lose space to title bars etc whilst the width is usu­ally max­im­ised. 但し, for por­trait dis­plays it is bet­ter to use the height prop­erty. これは次のように行うことができます CSS can identi­fy the screen orientation

の 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); }}
}