Layout fluido
Un layout fluido è un tipo di progettazione di una pagina web in cui il layout della pagina si ridimensiona quando cambia la dimensione della finestra. Questo si ottiene definendo le aree della pagina usando percentuali invece di larghezze fisse in pixel.
La maggior parte dei layout delle pagine web include una, due o tre colonne. Agli inizi del web design, quando la maggior parte degli utenti aveva schermi di dimensioni simili, gli sviluppatori web assegnavano larghezze fisse alle colonne. Ad esempio, un layout fisso può includere un'area principale dei contenuti larga 960px con tre colonne aventi larghezze di 180px, 600px e 180px. Sebbene questo layout possa apparire ottimo su uno schermo da 1024x768, potrebbe apparire piccolo su uno schermo da 1920x1080 e non entrerebbe in uno schermo da 800x600.
I layout fluidi risolvono questo problema usando percentuali per definire ogni area del layout. Ad esempio, invece di creare un'area dei contenuti di 960px, uno sviluppatore web può creare un layout che occupa l'80% dello schermo e in cui le tre colonne occupano rispettivamente il 18%, il 64% e il 18%. Usando le percentuali, i contenuti possono espandersi o ridursi per adattarsi alla finestra del computer dell'utente. Di seguito viene mostrato il CSS usato per creare un layout fisso e un layout fluido.
| Layout fisso | Layout fluido |
|---|---|
|
.content { width: 960px; } .left, .right { width: 180px; } .middle { width: 600px; } |
.content { width: 80%; } .left, .right { width: 18%; } .middle { width: 64%; } |
A ciascuna delle classi CSS negli esempi potrebbe essere assegnato un div all'interno dell'HTML di una pagina, dove le classi .left, .right e .middle sono racchiuse nella classe .content. La classe content potrebbe essere assegnata anche a una tabella, mentre le altre classi potrebbero essere assegnate alle celle della tabella. La classe .content a larghezza fissa non richiede una larghezza definita, poiché si estende automaticamente per tutta la larghezza dei div o delle celle della tabella in essa contenuti.
Layout fluido e responsive web design
I termini "layout fluido" e "responsive web design" vengono talvolta usati come sinonimi, ma indicano due cose diverse. Una pagina creata usando il responsive web design include query multimediali CSS, che caricano stili diversi a seconda della larghezza della finestra o del tipo di dispositivo usato per accedere alla pagina. Il responsive web design richiede più CSS e talvolta (JavaScript) rispetto a un layout fluido di base, ma offre anche un maggiore controllo sul layout della pagina.
Metti alla prova le tue conoscenze