Fluid Layout Definizione significato

Cos’è il Fluid Layout?

Un layout fluido è un tipo di progettazione di pagine web in cui il layout della pagina si ridimensiona quando la dimensione della finestra viene modificata. Questo si ottiene definendo le aree della pagina usando percentuali invece di larghezze fisse pixel.

La maggior parte dei layout delle pagine web include una, due o tre colonne. Nei primi giorni di web design, quando la maggior parte degli utenti aveva schermi di dimensioni simili, gli sviluppatori web assegnavano alle colonne larghezze fisse. Per esempio, un layout fisso può includere un’area di contenuto principale che è larga 960px con tre colonne che hanno larghezze di 180px, 600px, e 180px. Mentre questo layout potrebbe sembrare ottimo su uno schermo 1024×768, potrebbe sembrare piccolo su uno schermo 1920×1080 e non andrebbe bene su uno schermo 800×600.

I layout fluidi risolvono questo problema usando le percentuali per definire ogni area del layout. Per esempio, invece di creare un’area di contenuto di 960px, uno sviluppatore web può creare un layout che riempie l’80% dello schermo e le tre colonne possono occupare rispettivamente il 18%, 64% e 18%. Usando le percentuali, il contenuto può espandersi o restringersi per adattarsi alla finestra del computer dell’utente. Il CSS usato per creare un layout fisso contro un layout fluido è mostrato sotto.

Disposizione fissa Disposizione fluida
. content { larghezza: 960px; }
. left, . right { larghezza: 180px; }
. middle { larghezza: 600px; }
. content { larghezza: 80%; }
. left, . right { larghezza: 18%; }
. middle { larghezza: 64%; }

Le classi CSS negli esempi potrebbero essere assegnate ad un div all’interno di una pagina HTML dove le classi .left, .right, e .middle sono racchiuse nella classe .content. La classe content potrebbe anche essere assegnata ad una tabella e 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 alla larghezza dei div racchiusi o delle celle della tabella.

Fluid Layout vs Responsive Design

I termini “layout fluido” e ” responsive web design” sono talvolta usati in modo intercambiabile, ma sono due cose diverse. Una pagina creata usando il responsive web design include le media queries 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 a volte JavaScript) di un layout fluido di base, ma fornisce anche un maggiore controllo sul layout della pagina.

La descrizione di Fluid Layout in questa pagina è la definizione originale di SharTec.eu. Se volete linkare questa pagina, non dimenticate di citare la fonte dell’articolo.

SharTec.eu mira a spiegare la terminologia informatica in un modo che sia facile da capire. Ci sforziamo di essere semplici e precisi in ogni definizione che pubblichiamo. Se hai commenti sulla descrizione di Layout fluido o vuoi suggerire un nuovo termine tecnico, contattaci.