Fluid Layouts

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 63 von 76.

Im Responsive Webdesign passt sich ein fluides Layout an verschiedene Bildschirmgrößen an, indem es flexible Raster und relative Einheiten wie Prozentsätze anstelle von festen Pixelwerten verwendet. Dies hilft dem Layout, sich auszudehnen oder zu verkleinern, um auf jeden Bildschirm zu passen, was eine reibungslose Benutzererfahrung auf allen Geräten gewährleistet.

Die Grundprinzipien von fluiden Layouts umfassen:

Relative Einheiten: Die Verwendung von Prozentsätzen (%), Viewport-Einheiten (vw, vh) oder Ems (em) anstelle von festen Pixeln (px) für Breiten, Höhen, Außenabstände und Innenabstände.

Flexible Grids: Verwendung von CSS Grid oder Flexbox zur Erstellung von rasterbasierten Layouts, die sich an verschiedene Bildschirmgrößen anpassen können.

Max-width und min-width: Festlegen von maximalen und minimalen Breiten für Elemente, um zu verhindern, dass sie auf extremen Bildschirmgrößen zu breit oder zu schmal werden.

Hier ist ein Beispiel für ein einfaches fluides Layout unter Verwendung von Prozentangaben:

.container {
    width: 90%; /* The container takes up 90% of the viewport width */
    max-width: 1200px; /* The container will not exceed 1200px */
}
.sidebar {
    width: 30%; /* The sidebar takes up 30% of the container width */
    float: left;
}
.main-content {
    width: 70%; /* The main content area takes up 70% of the container width */
    float: left;
}

In diesem Beispiel hat das .container-Element eine fluide Breite von 90%, was bedeutet, dass es immer 90 % der Viewport-Breite einnimmt. Die max-width-Eigenschaft ist auf 1200px festgelegt, um zu verhindern, dass der Container auf großen Bildschirmen zu breit wird.

Die .sidebar- und .main-content-Elemente haben fluide Breiten von 30% beziehungsweise 70%, was es ihnen ermöglicht, sich an die Breite des Containers anzupassen.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einem übergeordneten Div-Element (<div>) gegeben, das zwei untergeordnete Div-Elemente (<div>) mit den Klassen sidebar und main enthält. Ihre Aufgabe ist es, ein fluides Layout unter Verwendung von Prozentangaben zu erstellen. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse container anspricht. Setzen Sie dessen width-Eigenschaft auf 80% und margin auf 0 auto. Fügen Sie zur Visualisierung einen border von 1px solid black hinzu.
Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse sidebar anspricht. Setzen Sie dessen width-Eigenschaft auf 25% und lassen Sie es nach links fließen (float).
Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse main anspricht. Setzen Sie dessen width-Eigenschaft auf 75% und lassen Sie es nach rechts fließen (float).

Spickzettel

Ein fluid Layout passt sich verschiedenen Bildschirmgrößen an, indem es flexible Raster und relative Einheiten wie Prozentsätze anstelle von festen Pixelwerten verwendet.

Grundprinzipien von fluid Layouts:

Relative Einheiten: Verwenden Sie Prozentsätze (%), Viewport-Einheiten (vw, vh) oder Ems (em) anstelle von festen Pixeln
Flexible Raster: Verwenden Sie CSS Grid oder Flexbox für anpassungsfähige Layouts
Max-width und min-width: Setzen Sie Grenzwerte, um zu verhindern, dass Elemente zu breit oder zu schmal werden

Beispiel für ein einfaches fluid Layout:

.container {
    width: 90%; /* Nimmt 90 % der Viewport-Breite ein */
    max-width: 1200px; /* Überschreitet 1200px nicht */
}
.sidebar {
    width: 30%; /* 30 % der Container-Breite */
    float: left;
}
.main-content {
    width: 70%; /* 70 % der Container-Breite */
    float: left;
}

Probier es selbst

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