0HTML5 Logoimmagini di sfondo reattivo per i siti web

Recentemente ho aggiornato il mio siti web e server web e l'aggiunta di un nuovo sito (LoveCrete.org). Volevo avere un'immagine di sfondo su LoveCrete e si rese conto che, naturalmente, 1 taglia non va bene tutti gli schermi. Ecco un riassunto di ciò che il mio pensiero è stato e quello che ho fatto per soddisfare le numerose dimensioni dello schermo e gli orientamenti.

Quale orientamento

I star­ted by mak­ing myself a little table of all the com­mon res­ol­u­tions used on PC 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 (non larghezza) e perderà molto da entrambe bordo dell'immagine. 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, which is not desir­able.

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 for all images and came up with sizes to make accord­ingly.

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. Significa anche un'immagine sorgente può essere ritagliata per 16:10 once and then mul­tiple sizes eas­ily cre­ated

gruppi risoluzione paesaggio Comune

AltezzaLarghezzaImmagine di makeCom­ments
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×1920Full 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

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 some­where!

Perché 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. tuttavia, for por­trait dis­plays it is bet­ter to use the height prop­erty. Questo può essere fatto come CSS can identi­fy the screen ori­ent­a­tion

Il CSS used then looks as fol­lows

corpo{background-repeat: no-repeat; background-attachment: fisso; background-position: centro; background-size: copertina;}

@media (larghezza massima: 768px) {corpo { immagine di sfondo: url(bg480.jpg); }}
@media (min-width:769px) e (larghezza massima: 1024px) {corpo { immagine di sfondo: url(bg640.jpg); }}
@media (min-width:1025px) e (larghezza massima: 1280px) {corpo { immagine di sfondo: url(bg800.jpg); }}
@media (min-width:1281px) e (larghezza massima: 1600px) {corpo { immagine di sfondo: url(bg1000.jpg); }}
@media (min-width:1601px) e (larghezza massima: 1920px) {corpo { immagine di sfondo: url(bg1200.jpg); }}
@media (min-width:1921px) e (larghezza massima: 2560px) {corpo { immagine di sfondo: url(bg1600.jpg); }}
@media (min-width:2561px) {corpo { immagine di sfondo: url(../images / bg2400.jpg); }}

@media (orientamento: ritratto){
@media (altezza massima: 480px) {corpo { immagine di sfondo: url(bg480.jpg); }}
@media (min-height:481px) e (altezza massima: 640px) {corpo { immagine di sfondo: url(bg640.jpg); }}
@media (min-height:641px) e (altezza massima: 800px) {corpo { immagine di sfondo: url(bg800.jpg); }}
@media (min-height:801px) e (altezza massima: 1000px) {corpo { immagine di sfondo: url(bg1000.jpg); }}
@media (min-height:1001px) e (altezza massima: 1200px) {corpo { immagine di sfondo: url(bg1200.jpg); }}
@media (min-height:1201px) e (altezza massima: 1600px) {corpo { immagine di sfondo: url(bg1600.jpg); }}
@media (min-height:1601px) {corpo { immagine di sfondo: url(bg2400.jpg); }}
}

Inviateci i vostri pensieri commentando qui sotto! Se si desidera iscriversi si prega di utilizzare il link iscriviti sul menu in alto a destra. È inoltre possibile condividere con i tuoi amici usando i link sottostanti sociali. Saluti.

lascia un commento