Introduzione al layout per diversi schermi in CSS

Nel mondo moderno, un sito web deve essere visualizzato correttamente su dispositivi con diverse dimensioni dello schermo.

Di solito i dispositivi sono suddivisi in quattro categorie: computer (desktop), laptop, tablet (tablet) e telefoni (mobile).

In passato, nei tempi antichi, erano noti le dimensioni popolari degli schermi di tutti i dispositivi, fortunatamente non ce n'erano così tanti. E i siti venivano realizzati in modo da essere visualizzati correttamente su una lista conosciuta di risoluzioni.

Attualmente il numero di dispositivi è diventato così elevato, che è impossibile compilare un elenco di risoluzioni per cui il sito deve essere ottimizzato. Oggi si ritiene che il layout debba essere visualizzato correttamente su schermi di qualsiasi dimensione.

Ciò si ottiene riorganizzando i blocchi nei punti chiave del layout. E questi punti chiave non vengono scelti per dispositivi specifici, ma in base ai contenuti del sito - in modo che abbiano un aspetto ottimale.

Tra un punto chiave e l'altro, la larghezza degli elementi del sito deve essere fluida, in modo che si adatti alla larghezza dello schermo. Nei punti chiave avviene la riorganizzazione dei blocchi in altre posizioni.

Il layout descritto è chiamato adattivo o reattivo (responsive). È ciò che studieremo nelle prossime lezioni.