4.1 Prozentwerte
Prozentwerte und relative Einheiten in CSS spielen eine wichtige Rolle bei der Erstellung flexibler und reaktionsfähiger Layouts. Sie ermöglichen es Elementen, sich an verschiedene Bildschirmgrößen und wechselnde Bedingungen anzupassen, was zu besserer Kompatibilität und Benutzerfreundlichkeit führt.
Prozentwerte werden verwendet, um die Größen von Elementen relativ zu ihren Elternelementen festzulegen. Dies macht das Layout anpassungsfähiger und flexibler.
Beispiel für die Verwendung von %:
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* Seitenverhältnis 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* Seitenverhältnis 2:1 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für die Verwendung von %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="min-height: 200px;">
<div class="container">
<div class="box">Inhalt</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für die Verwendung von %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Inhalt</div>
</div>
</body>
</html>
Code-Erklärung:
.container: setzt die Breite des Containers auf 80% der Breite des Elternelements und zentriert ihn mitmargin: 0 auto.box: setzt die Breite des Blocks auf 50% der Breite des Containers. Die Höhe des Blocks wird durchpadding-topbestimmt, was ein Seitenverhältnis von 1:2 ermöglicht
4.2 Relative Einheiten (em und rem)
Die Einheit em ist eine relative Einheit, die sich auf die Schriftgröße des Elternelements bezieht. Wenn sich die Schriftgröße des Elternelements ändert, ändern sich auch die em-Werte.
Beispiel für die Verwendung von em:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
Die Einheit rem ist eine relative Einheit, die sich auf die Schriftgröße des Root-Elements (html) bezieht. Sie hängt nicht von Elternelementen ab, was sie vorhersehbarer und nützlicher für die Erstellung skalierbarer Layouts macht.
Beispiel für die Verwendung von rem:
<div class="container">
Irgendein Text im Container
<div class="box">
Irgendein Text in der Box
</div>
</div>
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
Vergleich zwischen em und rem:
em: hängt von der Schriftgröße des Elternelements ab, was bei Verschachtelung zu einem Kaskadeneffekt führen kannrem: hängt von der Schriftgröße des Root-Elements (html) ab, was es vorhersehbarer und einfacher in der Anwendung macht
4.3 Kombinierte Verwendung von %
Die Verwendung relativer Einheiten (em und rem) in Kombination mit Prozenten ermöglicht es, flexible und adaptive Layouts zu erstellen, die auf allen Geräten korrekt angezeigt werden.
Beispiel: Kombinierte Verwendung von %
Wir erstellen ein Layout, in dem die Größen der Elemente mithilfe von Prozenten und relativen Einheiten festgelegt werden.
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kombinierte Verwendung von % und relativen Einheiten</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">Überschrift</div>
<div class="content">
<div class="sidebar">Seitenleiste</div>
<div class="main">Hauptinhalt</div>
</div>
<div class="footer">Fußzeile</div>
</div>
</body>
</html>
Code-Erklärung:
html: setzt die Basis-Schriftgröße für das gesamte Dokument.container: verwendet Prozentwerte, um die Breite des Containers festzulegen und ihn in der Mitte der Seite zu zentrieren.headerund.footer: verwendenremfür den Abstand, was sie vorhersehbar macht.content: verwendet Flexbox, um die Seitenleiste und den Hauptinhalt mit einem Abstand zwischen ihnen anzuordnen.sidebarund.main: verwenden Prozentwerte, um die Breite der Spalten festzulegen undremfür den Abstand
GO TO FULL VERSION