4.1 Grundlegende Konzepte
CSS-Variablen und Media Queries bieten mächtige Werkzeuge, um ein responsives Webdesign zu erstellen, das sich automatisch an verschiedene Bildschirmgrößen und Geräte anpasst. Variablen ermöglichen eine zentrale Verwaltung von Styles, während Media Queries es erlauben, diese Styles abhängig von Bedingungen, wie z.B. der Bildschirmbreite, zu ändern.
Grundlegende Konzepte
- CSS-Variablen: ermöglichen es, Werte festzulegen, die im gesamten CSS-Code wiederverwendet werden können. Sie können in verschiedenen Kontexten, wie z.B. Media Queries, geändert werden, was sie besonders nützlich für responsives Design macht.
- Media Queries: erlauben es, CSS-Styles abhängig von Gerätecharakteristiken, wie z.B. Breite oder Höhe des Bildschirms, anzuwenden. Dies ermöglicht es, das Aussehen und Verhalten einer Webseite an unterschiedliche Geräte anzupassen.
Verwendung von Variablen in Media Queries
CSS-Variablen können innerhalb von Media Queries verwendet werden, um Stilwerte abhängig von Bedingungen zu ändern. Dies ermöglicht es, flexiblere und leichter wartbare responsive Designs zu erstellen.
Beispiel für die Verwendung von Variablen in Media Queries:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
<body>
<p>Dies ist ein Absatz mit einem Link zu <a href="#">Example.com</a>.</p>
</body>
Erklärung:
In diesem Beispiel ändern sich die Variablenwerte je nach Bildschirmbreite:
- Für Bildschirme bis 600px Breite wechselt der Hintergrund zu einem dunkleren Farbton, und die Schriftgröße wird kleiner.
- Für Bildschirme von 601px bis 1200px Breite wechselt der Hintergrund zu einem mittleren Farbton, und die Schriftgröße wird etwas größer.
- Für Bildschirme über 1200px Breite werden die ursprünglichen Variablenwerte angewendet.
4.2 Beispiele für Variablen in Media Queries
Beispiel 1: Responsive Abstände und Schriftgrößen
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
<div class="container">
<p>Dies ist ein responsiver Container mit adaptiven Abständen und Schriftgrößen.</p>
</div>
Erklärung:
- In diesem Beispiel ändert der Container
.containerseine Abstände und Schriftgröße abhängig von der Bildschirmbreite.
Beispiel 2: Thematisierung der Seite mit Variablen und Media Queries
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
<body>
<p>Dieser Text und der Link passen sich an das bevorzugte Farbschema des Nutzers an. Besuche <a href="#">Example.com</a>.</p>
</body>
Erklärung:
-
In diesem Beispiel ändert die Seite das Farbschema abhängig von den Vorlieben des Nutzers (
prefers-color-scheme: dark). Die Hintergrund-, Text- und Linkfarben ändern sich automatisch beim Umschalten zwischen hellem und dunklem Thema.
4.3 Responsives Grid
Beispiel für die Verwendung von Variablen und Media Queries für ein responsives Grid:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
<div class="grid-container">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
<div>Element 4</div>
</div>
Erklärung:
- In diesem Beispiel wird ein responsives Grid verwendet, das die Anzahl der Spalten abhängig von der Bildschirmbreite ändert. Auf schmalen Bildschirmen (bis 600px) hat das Grid eine Spalte, auf mittleren (von 600px bis 900px) zwei Spalten, und auf großen (über 900px) drei Spalten.
GO TO FULL VERSION