Layout fluidi

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 63 di 76.

Nel responsive web design, un layout fluido si adatta alle diverse dimensioni dello schermo utilizzando griglie flessibili e unità relative come le percentuali invece di valori fissi in pixel. Questo aiuta il layout ad espandersi o restringersi per adattarsi a qualsiasi schermo, garantendo un'esperienza utente fluida su tutti i dispositivi.

I principi fondamentali dei layout fluidi includono:

Unità relative: usare le percentuali (%), le unità del viewport (vw, vh) o gli em (em) invece dei pixel fissi (px) per larghezze, altezze, margini e spaziatura interna.

Griglie flessibili: usare CSS Grid o Flexbox per creare layout basati su griglie che possono adattarsi a schermi di dimensioni diverse.

Larghezza massima e larghezza minima: impostare larghezze massime e minime per gli elementi per evitare che diventino troppo larghi o troppo stretti su schermi di dimensioni estreme.

Ecco un esempio di layout fluido di base che usa le percentuali:

.container {
    width: 90%; /* Il contenitore occupa il 90% della larghezza della finestra del browser */
    max-width: 1200px; /* Il contenitore non supererà i 1200px */
}
.sidebar {
    width: 30%; /* La barra laterale occupa il 30% della larghezza del contenitore */
    float: left;
}
.main-content {
    width: 70%; /* L'area del contenuto principale occupa il 70% della larghezza del contenitore */
    float: left;
}

In questo esempio, l'elemento .container ha una larghezza fluida del 90%, il che significa che occuperà sempre il 90% della larghezza dell'area di visualizzazione. La proprietà max-width è impostata su 1200px per evitare che il contenitore diventi troppo largo sugli schermi grandi.

Gli elementi .sidebar e .main-content hanno larghezze fluide rispettivamente del 30% e del 70%, che consentono loro di adattarsi alla larghezza del contenitore.

Sfida

Facile

Ti viene fornito un documento HTML con un elemento padre (<div>) che contiene due elementi figli (<div>) con le classi sidebar e main. Il tuo compito è creare un layout fluido usando le percentuali. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe container. Imposta la proprietà width su 80% e margin su 0 auto. Aggiungi un border di 1px solid black per visualizzarlo.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe sidebar. Imposta la proprietà width su 25% e fallo flottare a sinistra.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe main. Imposta la proprietà width su 75% e fallo flottare a destra.

Provalo tu

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>