Responsive Design mit CSS-Variablen
Auch hier helfen CSS-Variablen den Code übersichtlich zu halten und Redundanzen zu vermeiden!
Schaut Euch dazu auch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS-Variablen</title>
<link rel="stylesheet" href="c/style.css">
<!-- Anweisungen für das Nav-Menue in eigenem CSS - übersichtlicher! -->
<link rel="stylesheet" href="c/nav.css">
</head>CSS
/* ================= Grundeinstellungen ================== */
:root {
--schrift-groesse: 21px; /* Schriftgröße */
--main-breite: 80%; /* Breite von "main" */
--columns: 1fr 2fr; /* Raster innerhalb des Artikels ".raster" */
}
/* ================= Media-Queries mit Variablen ================== */
/* Einstellungen für mittelgroße Screens zwischen 530px und 700px */
@media screen and (max-width: 700px) {
:root {
--schrift-groesse: 18px; /* Schriftgröße hier etwas kleiner */
--main-breite: 90%;
--columns: 1fr 1fr; /* zweispaltiges Layout */
}
}
/* Einstellungen für kleine Screens bis 530px; */
@media screen and (max-width: 530px) {
:root {
--schrift-groesse: 16px; /* Schriftgröße hier etwas kleiner */
--main-breite: 96%;
--columns: 1fr; /* einspaltiges Layout */
}
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: var(--schrift-groesse);
line-height: 1.5;
}
main {
width: var(--main-breite);
max-width: 1024px;
margin: 2% auto;
}
/* das Raster-erzeugende Element */
.raster {
display: grid;
grid-template-columns: var(--columns);
grid-gap: 1.5em;
}Achtung: CSS ist nicht vollständig – nur hier relevantes dargestellt!
CodePen
See the Pen responsive design mit css-variablen by Matthias Edler-Golla (@megolla) on CodePen.
Online-Tutorial
Auch dazu gibt es ein gutes, kostenloses Online-Tutorial von Per Harald Borgen!