Layout-uri Responsive cu CSS (Curs HTML și CSS pentru începători, partea 6)

Introducere

În era dispozitivelor mobile și a ecranelor de dimensiuni variate, abilitatea de a crea layout-uri web care se adaptează la diferite dimensiuni de ecran este esențială. Designul responsiv asigură că site-ul web arată bine și funcționează corect pe orice dispozitiv, de la telefoane mobile la desktopuri cu ecrane mari.

Ce este designul responsiv?

Designul responsiv este o abordare în dezvoltarea web care face ca paginile să se redimensioneze și să se reorganizeze automat pentru a se potrivi cu dimensiunea ecranului pe care sunt vizualizate.

Concepte de bază ale designului responsiv

1. Viewport

Viewport-ul reprezintă zona vizibilă a unei pagini web pe un dispozitiv.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Această linie în <head> asigură că site-ul se va adapta corect pe dispozitive mobile.

2. Unități relative

Utilizarea unităților relative în loc de cele fixe permite elementelor să se redimensioneze proporțional.

%: Procentaj relativ la elementul părinte
em: Relativ la dimensiunea fontului elementului părinte
rem: Relativ la dimensiunea fontului elementului rădăcină (de obicei <html>)
vw și vh: Procentaj din lățimea, respectiv înălțimea viewport-ului

Exemplu:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

3. Media Queries

Media queries permit aplicarea de stiluri CSS diferite în funcție de caracteristicile dispozitivului, cum ar fi lățimea ecranului.

Sintaxă de bază:

@media screen and (max-width: 600px) {
    /* Stiluri pentru ecrane cu lățime de până la 600px */
}

Exemplu practic:

.menu {
    display: flex;
}

@media screen and (max-width: 768px) {
    .menu {
        flex-direction: column;
    }
}

Tehnici avansate de layout responsiv

1. Flexbox

Flexbox este un model de layout unidimensional care oferă control flexibil asupra elementelor dintr-un container.

Exemplu de bază:

.container {
    display: flex;
    justify-content: space-between;
}

.item {
    flex: 1;
}

@media screen and (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

2. CSS Grid

CSS Grid este un sistem de layout bidimensional care oferă control precis asupra rândurilor și coloanelor.

Exemplu de bază:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

3. Imagini responsive

Asigurați-vă că imaginile se adaptează la dimensiunea containerului lor:

img {
    max-width: 100%;
    height: auto;
}

Pentru imagini de fundal:

.background-image {
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
}

Practici recomandate pentru design responsiv

Mobile First: Începeți cu designul pentru dispozitive mobile și apoi extindeți pentru ecrane mai mari.
Testare pe multiple dispozitive: Verificați site-ul pe o varietate de dispozitive și browsere.
Utilizați unități relative: Preferați % și em/rem în locul pixelilor pentru dimensiuni.
Evitați lățimile fixe: Utilizați max-width în loc de width fixă pentru containere.
Optimizați performanța: Asigurați-vă că site-ul se încarcă rapid pe dispozitive mobile.

Exemplu practic: Layout responsiv complet

Să creăm un layout responsiv simplu care include un header, o bară laterală și un conținut principal.

HTML:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Responsiv</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Site-ul Meu Responsiv</h1>
        <nav>
            <ul>
                <li><a href="#">Acasă</a></li>
                <li><a href="#">Despre</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Conținut Principal</h2>
            <p>Acesta este conținutul principal al paginii.</p>
        </article>
        <aside>
            <h3>Bară Laterală</h3>
            <p>Informații suplimentare aici.</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2024 Site-ul Meu Responsiv</p>
    </footer>
</body>
</html>

CSS (style.css):

/* Stiluri de bază */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav a {
    color: white;
    text-decoration: none;
}

main {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

article {
    flex: 2;
    padding-right: 20px;
}

aside {
    flex: 1;
    background-color: #f4f4f4;
    padding: 20px;
}

/* Media Queries pentru Responsivitate */
@media screen and (max-width: 768px) {
    main {
        flex-direction: column;
    }

    article, aside {
        width: 100%;
        padding: 0;
    }

    article {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 480px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
}

Acest exemplu demonstrează un layout responsiv care se adaptează la diferite dimensiuni de ecran:

Pe ecrane mari, conținutul principal și bara laterală sunt afișate alături.
Pe ecrane medii (sub 768px), bara laterală se mută sub conținutul principal.
Pe ecrane mici (sub 480px), meniul de navigare devine vertical.

Concluzie

Crearea de layout-uri responsive cu CSS este o abilitate esențială în dezvoltarea web modernă. Prin utilizarea media queries, flexbox, grid și a altor tehnici responsive, puteți crea site-uri web care oferă o experiență excelentă pe orice dispozitiv. Practicați aceste concepte și experimentați cu diferite layout-uri pentru a vă îmbunătăți abilitățile de design responsiv.