Elastyczne układy

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 63 z 76.

W responsywnym projektowaniu stron internetowych płynny układ dostosowuje się do różnych rozmiarów ekranów za pomocą elastycznych siatek i jednostek względnych, takich jak wartości procentowe, zamiast stałych wartości w pikselach. Dzięki temu układ może się rozszerzać lub kurczyć, aby dopasować się do każdego ekranu, zapewniając płynne korzystanie ze strony na wszystkich urządzeniach.

Kluczowe zasady płynnych układów obejmują:

Jednostki względne: używanie wartości procentowych (%), jednostek widoku (vw, vh) lub jednostek em (em) zamiast stałych pikseli (px) dla szerokości, wysokości, marginesów i dopełnienia.

Elastyczne siatki: Używanie CSS Grid lub Flexbox do tworzenia układów opartych na siatce, które mogą dostosowywać się do różnych rozmiarów ekranów.

Maksymalna i minimalna szerokość: Ustawianie maksymalnej i minimalnej szerokości elementów, aby nie stały się zbyt szerokie lub zbyt wąskie na ekranach o skrajnych rozmiarach.

Oto przykład podstawowego płynnego układu wykorzystującego wartości procentowe:

.container {
    width: 90%; /* Kontener zajmuje 90% szerokości obszaru wyświetlania */
    max-width: 1200px; /* Kontener nie przekroczy 1200px */
}
.sidebar {
    width: 30%; /* Panel boczny zajmuje 30% szerokości kontenera */
    float: left;
}
.main-content {
    width: 70%; /* Główny obszar treści zajmuje 70% szerokości kontenera */
    float: left;
}

W tym przykładzie element .container ma płynną szerokość równą 90%, co oznacza, że zawsze zajmie 90% szerokości obszaru roboczego. Właściwość max-width jest ustawiona na 1200px, aby zapobiec nadmiernemu poszerzaniu się kontenera na dużych ekranach.

Elementy .sidebar i .main-content mają płynne szerokości wynoszące odpowiednio 30% i 70%, dzięki czemu mogą dostosowywać się do szerokości kontenera.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nadrzędnym elementem (<div>), który zawiera dwa podrzędne elementy (<div>) z klasami sidebar i main. Twoim zadaniem jest utworzenie płynnego układu przy użyciu wartości procentowych. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> z klasą container. Ustaw jego właściwość width na 80%, a właściwość margin na 0 auto. Dodaj obramowanie 1px solid black, aby było widoczne.
Napisz regułę CSS, która wybiera element <div> z klasą sidebar. Ustaw jego właściwość width na 25% i spraw, by był wyrównany do lewej.
Napisz regułę CSS, która wybiera element <div> z klasą main. Ustaw jego właściwość width na 75% i spraw, by był wyrównany do prawej.

Spróbuj swoich sił

<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>