Le pagine Web con un layout fluido o di larghezza liquida utilizzano l'intera larghezza del browser. Questo perché una o più colonne devono essere automaticamente ridimensionate per adattarsi alla dimensione della finestra del browser. Quindi, il layout fluido è più amichevole perché si adatta alle dimensioni dello schermo dello spettatore. Più specificamente, per creare un layout della larghezza fluida, la larghezza dell'elemento deve essere specificata in "percentuale".

Questo blog ti guiderà sulla creazione di un layout a larghezza fissa con CSS.

Come creare layout di larghezza fluida usando CSS?

In HTML, prima, aggiungi un elemento div con un nome di classe "larghezza fluida". Poi aggiungi

E

elementi per aggiungere alcuni contenuti.

Html

Benvenuti in Linuxhint

Linuxhint è il miglior sito di tutorial online. Se vuoi imparare la programmazione bash, sei nel posto giusto.

L'aggiunta del codice sopra al file HTML mostrerà il seguente output:

La struttura della pagina è stata completata. Ora, nella prossima sezione, gli elementi HTML saranno disegnati utilizzando diverse proprietà CSS.

Stile tutti gli elementi

*
Margine: 0px;
imbottitura: 0px;

Tutti gli elementi HTML specificati nel file avranno un margine 0px e imbottitura 0px.

Stile Widid-Width Div

.Wididth fluid
Background-color: RGB (238, 238, 238);
larghezza: 90%;
Margine: auto;
Altezza: 100VH;

Quanto segue è la descrizione delle proprietà applicate alla larghezza del fluido DIV:

• ".larghezza fluida"Viene utilizzato per accedere alla larghezza del fluido di classe. Qui, il " . "Il segno è noto come selettore di classe.
• "colore di sfondo"La proprietà determina il colore di sfondo dell'elemento.
• "larghezza"La proprietà specifica la larghezza dell'elemento.
• "margine"La proprietà aggiunge spazio attorno agli elementi.
• "altezza"La proprietà imposta l'altezza dell'elemento.

Fornendo il codice sopra menzionato, l'output apparirà come segue:

Si può vedere che la dimensione del Div di larghezza fluida è regolata in base alla dimensione dello schermo. Significa che gli elementi che sono specificati in percentuali impostano la propria larghezza in base alla risoluzione dello schermo.

È così che possiamo creare un layout di larghezza fluida in CSS.

Conclusione

Gli sviluppatori devono stare molto attenti durante la progettazione di qualsiasi applicazione. Devono tenere presente come vogliono che la loro applicazione appaia su diversi dispositivi. Una di queste cose è impostare il layout della pagina web. Inoltre, per creare un layout intuitivo e reattivo, il "percentuale"L'unità deve essere utilizzata. Questo blog ha spiegato con successo come creare un layout di larghezza fluida in CSS con un esempio.