Medienabfragen (Media Queries) sind ein zentraler Bestandteil von Responsive Design und ermöglichen es, CSS-Regeln basierend auf den Eigenschaften des Geräts oder Viewports anzuwenden. Mit Medienabfragen lassen sich Layouts, Schriftgrößen und andere Stilregeln an die Bildschirmgröße, Auflösung und Ausrichtung des Geräts anpassen, um eine optimale Benutzererfahrung auf verschiedenen Geräten zu gewährleisten.
Medienabfragen werden mit dem Schlüsselwort @media
definiert, gefolgt von einem Bedingungsausdruck, der festlegt, wann die
Regeln innerhalb der Medienabfrage angewendet werden. Die am häufigsten
verwendete Bedingung ist die Bildschirmbreite (width), um
Layouts je nach Gerätetyp (z. B. Smartphone, Tablet, Desktop)
anzupassen.
/* Allgemeine Stile für alle Bildschirmgrößen */
body {
font-size: 16px;
}
/* Spezifische Stile für Bildschirme mit einer maximalen Breite von 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}In diesem Beispiel wird die Schriftgröße für Bildschirme mit einer Breite von maximal 768px reduziert.
Die Breite des Viewports ist die häufigste Bedingung in Medienabfragen, um unterschiedliche Layouts für Smartphones, Tablets und Desktops zu erstellen.
@media (min-width: 768px) {
/* Layout für Tablets und Desktops */
.sidebar {
display: block;
}
}Ähnlich wie die Breite kann auch die Höhe des Bildschirms genutzt werden, um Stile basierend auf der vertikalen Größe des Viewports anzupassen. Diese Bedingung wird oft für Geräte mit kleineren Bildschirmhöhen, wie mobile Geräte im Querformat, genutzt.
@media (max-height: 500px) {
.header {
display: none;
}
}Mit der resolution-Bedingung lässt sich die Pixeldichte
des Bildschirms ansprechen. Diese Bedingung ist besonders nützlich, um
hochauflösende Bilder und Grafiken für Retina-Displays
bereitzustellen.
@media (min-resolution: 2dppx) {
.logo {
background-image: url('logo@2x.png');
}
}Hier wird ein hochauflösendes Bild verwendet, wenn das Gerät eine
Pixeldichte von mindestens 2 dppx (Dots per Pixel) hat.
Mit der orientation-Bedingung kann die Ausrichtung des
Bildschirms (Hoch- oder Querformat) angesprochen werden. Diese Bedingung
ist nützlich für das Anpassen des Layouts, wenn Benutzer ihre Geräte
drehen.
@media (orientation: landscape) {
.sidebar {
display: block;
}
}Hier wird die Sidebar nur im Querformat angezeigt.
Mehrere Bedingungen lassen sich kombinieren, um spezifischere
Medienabfragen zu erstellen. Bedingungen werden durch
and verknüpft, um sicherzustellen, dass
alle Bedingungen zutreffen müssen.
@media (min-width: 768px) and (orientation: landscape) {
.sidebar {
display: block;
}
}Hier wird die Sidebar nur angezeigt, wenn die Bildschirmbreite mindestens 768px beträgt und der Bildschirm im Querformat ist.
Breakpoints sind vordefinierte Bildschirmbreiten, bei denen das Layout geändert wird, um auf verschiedene Gerätegrößen zu reagieren. Typische Breakpoints sind:
/* Smartphone */
@media (max-width: 600px) {
/* Stile für Smartphones */
}
/* Tablets */
@media (min-width: 600px) and (max-width: 1024px) {
/* Stile für Tablets */
}
/* Desktops */
@media (min-width: 1024px) {
/* Stile für Desktops */
}/* Standardlayout für Desktops */
.container {
display: flex;
flex-direction: row;
}
/* Anpassungen für Tablets */
@media (max-width: 1024px) {
.container {
flex-direction: column;
}
}
/* Anpassungen für Smartphones */
@media (max-width: 600px) {
.container {
padding: 10px;
}
.sidebar {
display: none;
}
}In diesem Beispiel bleibt das Layout auf Desktops in einer Zeile (Reihe), wechselt jedoch auf Tablets zu einer Spaltenstruktur und blendet auf Smartphones die Sidebar aus.
Responsive Einheiten sind CSS-Einheiten, die sich dynamisch an die Größe des Viewports oder des umgebenden Containers anpassen. Sie sind entscheidend für Responsive Design, da sie flexible Layouts und Elemente ermöglichen, die auf unterschiedlichen Bildschirmgrößen und Geräten optimal dargestellt werden.
Relative Einheiten passen sich im Vergleich zu einem übergeordneten Element oder dem Viewport an und sind daher ideal für responsive Designs.
Prozente werden relativ zur Größe des übergeordneten Containers berechnet, was sie besonders nützlich für fließende Layouts macht.
.container {
width: 80%; /* 80% der Breite des übergeordneten Elements */
}em und
remem entspricht 100% der
Schriftgröße des Eltern-Elements.html). Ein rem bleibt gleich,
unabhängig von der Verschachtelung..container {
font-size: 1.2rem; /* Skaliert basierend auf der Root-Schriftgröße */
padding: 2em; /* Basierend auf der Schriftgröße des Containers */
}Verwendung: - em eignet sich gut für Inline-Elemente und Bereiche, deren Größe vom Eltern-Element abhängen soll. - rem bietet Konsistenz, da es sich nicht durch die Verschachtelung beeinflussen lässt und eignet sich gut für globale Schriftgrößen.
Viewport-Einheiten sind relativ zur Größe des Ansichtsfensters und passen sich bei Änderung der Fenstergröße dynamisch an. Sie eignen sich hervorragend für responsive Designs, die sich an den Bildschirm anpassen sollen.
vw
und vh, ideal für quadratische Elemente auf Bildschirmen
unterschiedlicher Größe.vw
und vh..header {
font-size: 3vw; /* Schriftgröße entspricht 3% der Bildschirmbreite */
height: 50vh; /* Höhe entspricht 50% der Bildschirmhöhe */
}min(),
max(), und clamp()Diese Funktionen bieten mehr Flexibilität, indem sie dynamisch zwischen Werten wechseln und die Größe auf einem Minimum oder Maximum begrenzen.
min()min() wählt den kleineren von zwei oder mehr Werten, um
sicherzustellen, dass ein Element nicht größer wird als der festgelegte
Wert.
.container {
width: min(90%, 400px); /* Maximal 90% des Containers, aber nicht mehr als 400px */
}max()max() wählt den größeren von zwei oder mehr Werten, was
nützlich ist, um ein Element auf eine Mindestgröße zu setzen.
.container {
width: max(300px, 50%); /* Mindestens 300px, aber kann 50% des Containers erreichen */
}clamp()clamp() legt einen dynamischen Wert mit festgelegtem
Minimum und Maximum fest. Die Syntax lautet:
clamp(min, preferred, max).
.container {
font-size: clamp(1rem, 2vw, 2rem); /* Dynamische Schriftgröße, begrenzt zwischen 1rem und 2rem */
}body {
font-size: clamp(1rem, 1.5vw, 2rem); /* Passt die Schriftgröße dynamisch an */
}.section {
padding: 5vh 10vw; /* Vertikaler Abstand relativ zur Viewport-Höhe und horizontal zur -Breite */
}.image {
width: 100%; /* Breite passt sich dem Eltern-Container an */
max-width: 50vw; /* Maximale Breite auf 50% des Viewports beschränkt */
}vw, vh, em und rem
gemeinsam für Layouts, die sich je nach Bildschirmgröße dynamisch
anpassen.clamp() für flexible Typografie:
clamp() ist ideal, um Schriftgrößen und Abstände flexibel
und trotzdem kontrolliert zu gestalten.Der Mobile-First-Ansatz ist eine Designstrategie für responsive Webseiten, bei der zunächst das Layout und die Funktionalität für kleine Bildschirme (z. B. Smartphones) entwickelt wird, bevor es schrittweise für größere Bildschirmgrößen erweitert wird. Diese Herangehensweise stellt sicher, dass eine Webseite auf mobilen Geräten optimal und benutzerfreundlich ist, was zunehmend wichtiger wird, da die Mehrheit der Nutzer über mobile Endgeräte auf das Internet zugreift.
Im Mobile-First-Ansatz werden CSS-Regeln zunächst ohne Medienabfragen definiert. Spezifische Anpassungen für größere Bildschirme werden dann mit min-width-Medienabfragen hinzugefügt.
/* Basisstile für mobile Geräte */
body {
font-size: 16px;
padding: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.navbar {
font-size: 1.2rem;
padding: 1rem;
}
/* Anpassungen für Tablets */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
.navbar {
font-size: 1.4rem;
}
}
/* Anpassungen für Desktops */
@media (min-width: 1024px) {
body {
font-size: 18px;
padding: 20px;
}
.navbar {
font-size: 1.6rem;
}
}In diesem Beispiel wird das Layout für mobile Geräte erstellt. Wenn der Bildschirm mindestens 768px breit ist, ändert sich das Layout für Tablets. Ab 1024px wird das Layout für größere Desktop-Bildschirme angepasst.
rem, em,
vw und vh, um Layouts und Schriftgrößen an die
Bildschirmgröße anzupassen.min-width für
Medienabfragen: Definiere Medienabfragen für größere
Bildschirme, um ein stufenweises „Aufbauen“ des Designs zu ermöglichen,
anstatt Funktionen für kleinere Bildschirme zu „entfernen“.Responsive Bilder und Videos sind entscheidend, um Medieninhalte an verschiedene Bildschirmgrößen und -auflösungen anzupassen. Dadurch werden Ladezeiten und Datenverbrauch optimiert, was besonders auf mobilen Geräten eine bessere Benutzererfahrung bietet. HTML und CSS bieten mehrere Techniken, um sicherzustellen, dass Bilder und Videos auf jedem Gerät korrekt angezeigt werden.
Bilder sollten in einer Weise eingebunden werden, dass sie sich dynamisch an die Bildschirmgröße und Auflösung anpassen können.
Durch CSS können Bilder so eingestellt werden, dass sie innerhalb ihres Containers flexibel skaliert werden.
img {
max-width: 100%;
height: auto;
}Diese Regel sorgt dafür, dass das Bild seine Breite an den Container anpasst, ohne das Seitenverhältnis zu verlieren.
HTML5 bietet Attribute wie srcset und
sizes, um für verschiedene Bildschirmgrößen und
-auflösungen unterschiedliche Bildquellen bereitzustellen.
<img
src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="(max-width: 600px) 100vw, (min-width: 601px) and (max-width: 1200px) 50vw, 33vw"
alt="Beispielbild">vw), je nach Bildschirmgröße.In diesem Beispiel wird auf kleinen Bildschirmen das Bild in voller
Breite (100vw), auf mittleren Bildschirmen mit 50% der
Breite (50vw) und auf großen Bildschirmen mit einem Drittel
der Breite (33vw) angezeigt.
<picture>-Element für verschiedene BildformateDas <picture>-Element ermöglicht die Auswahl
unterschiedlicher Bildquellen basierend auf Bedingungen wie der
Bildschirmbreite oder dem Bildformat.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Beispielbild">
</picture>In diesem Beispiel wird, wenn unterstützt, das Bild im modernen WebP-Format geladen, andernfalls greift der Browser auf die JPEG-Version zurück.
Ähnlich wie Bilder sollten auch Videos an verschiedene Bildschirmgrößen angepasst werden.
Mit der folgenden CSS-Technik kann ein Video so eingestellt werden, dass es sich an den Container anpasst und das Seitenverhältnis beibehält.
.video-container {
position: relative;
padding-bottom: 56.25%; /* Seitenverhältnis 16:9 */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div class="video-container">
<iframe src="https://www.youtube.com/embed/beispielvideo" frameborder="0" allowfullscreen></iframe>
</div>In diesem Beispiel wird ein Video im 16:9-Format durch die
CSS-Eigenschaft padding-bottom: 56.25% in einem responsiven
Container eingebettet. Die Breite und Höhe des Videos passen sich
dynamisch an die Größe des Containers an.
<video>-Element mit verschiedenen QuellenDas <video>-Element unterstützt das Einbinden
mehrerer Videoquellen für verschiedene Formate. Dies ist nützlich, da
nicht alle Browser alle Videoformate unterstützen.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Dein Browser unterstützt dieses Videoformat nicht.
</video>Hier stellt das <video>-Element sicher, dass das
Video für die meisten Browser abspielbar ist, indem es mehrere Formate
anbietet.
Um ein Video im Hintergrund responsiv zu gestalten, kann CSS verwendet werden:
.background-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<video class="background-video" autoplay muted loop>
<source src="background.mp4" type="video/mp4">
<source src="background.webm" type="video/webm">
</video>Mit der CSS-Eigenschaft object-fit: cover passt sich das
Video an, ohne sein Seitenverhältnis zu verlieren.