0immagini 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 riepilogo di ciò che pensavo e di cosa ho fatto per soddisfare le numerose dimensioni e orientamenti dello schermo.

Quale orientamento

Ho iniziato facendomi una piccola tabella di tutte le risoluzioni comuni utilizzate PC e compresse (in orientamento orizzontale). Ho deciso di concentrarmi su questo perché la maggior parte delle immagini sono disponibili nel paesaggio, quindi questo è un punto ragionevole per iniziare.

Ho deciso che avrei posizionato le immagini al centro della pagina e in alcuni casi avrei lasciato che i bordi si perdessero dal bordo dello schermo. Quando un telefono viene utilizzato in orientamento verticale, caricherà l'immagine in base all'altezza (non larghezza) e perderà molto da entrambe bordo dell'immagine. Farlo in qualsiasi altro modo significherebbe aver bisogno di immagini ritagliate in una forma completamente diversa o di avere una "tessera" di immagine orizzontale su uno schermo alto, che non è desiderabile.

I rapporti della dimensione massima dell'immagine da realizzare in ciascun gruppo erano tutt'intorno 1.6 con alcuni un po 'più alti. Per semplificare le cose ho deciso di utilizzare un rapporto di 16:10 per tutte le immagini e si avvicinò con dimensioni per rendere di conseguenza.

Ciò significa che nella maggior parte dei casi l'immagine non si adatta perfettamente alle dimensioni dello schermo, ma tutti gli schermi avranno qualcosa di molto vicino e nessuno schermo finirà con qualcosa di troppo piccolo. Significa anche un'immagine sorgente può essere ritagliata per 16:10 una volta e poi più dimensioni facilmente create

gruppi risoluzione paesaggio Comune

Come puoi vedere ho raggruppato alcune risoluzioni e poi le farò 1 immagine che coprirà tutte le altezze fino alla massima altezza in quel gruppo. Mi assicurerò che l'immagine sia anche abbastanza larga per la larghezza massima con cui tale altezza potrebbe essere accoppiata su uno schermo normale. Non ho tenuto conto di configurazioni insolite come 21:9 monitor o più schermi: deve esserci un limite da qualche parte!

Perché CSS usa la dimensione della visualizzazione o del browser e non la dimensione dello schermo gli schermi orizzontali devono usare la larghezza anziché l'altezza - poiché sulla maggior parte dei sistemi la parte superiore e inferiore perdono spazio per le barre del titolo ecc. mentre la larghezza è solitamente massimizzata. tuttavia, per i display verticali è meglio usare la proprietà height. Questo può essere fatto come CSS può identificare l'orientamento dello schermo

Il CSS utilizzato poi guarda come segue

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