Die Abstände auf der Website in der mobilen Ausgabe gefallen dir nicht? Die Anordnung der Boxen in der Desktop-Ansicht überzeugt dich nicht? Solche und ähnliche Probleme kannst du in CSS seit längerer Zeit problemlos lösen: mit Media Queries.
Vielleicht hast du schon Mal solche oder ähnliche Konstrukte in CSS gesehen und dich gefragt wofür die gut sind:
@media (max-width: 700px) {{.hinweisbox {padding: 3%;}}Salopp gesagt: Du kannst mithilfe von Media Queries, die CSS-Angaben in verschiedene Schubladen einsortieren, die dann je nach Szenario geöffnet oder geschlossen bleiben.
Der obere Code war ein Beispiel für eine Medienabfrage (engl. Media Query). Die CSS-Regel innerhalb der geschweiften Klammer, wird nur unter bestimmten Umständen angewandt, und zwar dann, wenn die Breite des Fensters (engl. Viewport) maximal 700 Pixel breit ist.
Ist das Fenster dagegen 701 oder mehr Pixel breit, dann wird die Regel ignoriert.
Mehrere Bedingungen kombiniert
Die Medienanfragen erlaubt dir nicht nur eine Bedingung. Du kannst die problemlos miteinader kombinieren. So könnte eine Abfrage ausschauen, die Fensterbreiten in einem bestimmten Bereich berücksichtigt. Die folgende Abfrage spricht nur Fensterbreiten zwischen 700 und 850 Pixel an:
@media (min-width: 700px) and (max-width: 850px) {{.hinweisbox {padding: 3%;}}Die Medienabfragen berücksichtigen nicht nur Zahlenwerte, du kannst ebenfalls mit Schlüsselwörtern (Keywords) arbeiten. Folgende Medienabfrage wird nur bei der Druckausgabe berücksichtigt und das auch nur dann, wenn das Fenster mindestens 50 rem breit ist:
@media print and (min-width: 50rem) {{.hinweisbox {padding: 3%;}}Medienabfragen in HTML-Dokumenten
Du kannst mit den Medienabfragen auch in HTML-Dokumenten arbeiten:
<head>
<link rel="stylesheet" href="immer.css">
<link rel="stylesheet" href="alle-bildschirme.css" media="screen">
<link rel="stylesheet" href="drucker.css" media="print">Das erste CSS hat keine Medienangabe und wird immer angewendet. Das zweite CSS kommt nur bei Bildschirmen zum Einsatz und das dritte CSS wird nur berücksichtigt, wenn das Dokument ausgedruckt wird. Bei der Angabe der Schlüsselwörter ist noch nicht Schluss. Auch hier kannst du Zahlenwerte einsetzen:
<link href="mobil.css" rel="stylesheet" media="screen and (max-width: 700px)">
In diesem Fall wird die CSS-Datei nur bei Bildschirmen mit einer maximalen Breite von 700 Pixel geladen und sonst nicht. Solche Einbindungen haben den großen Vorteil, dass sie nicht den Aufbau deiner Website (Rendering Prozess) blockieren.
Es ist unnötig, dass du CSS-Regeln laden lässt, die für die Ausgabe nicht notwendig sind. Wenn du das unterbindest, dann machst du die Website schneller und das kommt auch den Besuchern zugute.
Weitere Informationen und auch Beispiele zu diesem Thema findest du hier:
Weiterführende Links
- CSS/Media Queries/Medienmerkmale auf SelfHTML
- Media Queris auf MDN
- Das link-Element auf MDN [en]
- Rendering-blockierendes CSS auf Google Developers
Photo by 4motions Werbeagentur on Unsplash
Vladimir Simović
Vladimir Simović setzt seit 2000 mit HTML & CSS und seit 2004 mit WordPress Website-Projekte um. Seit Januar 2004 hat er als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anfängen Tipps und Tricks veröffentlicht. Seit April 2022 ist er als Redakteur für den Blog-Bereich von STRATO verantwortlich und verfasst Informationsartikel insbesondere zu WordPress Themen. Im Laufe der Jahre hat er Fachbücher sowie über 60 Fachartikel publiziert und weit über hundert WordPress Projekte betreut und umgesetzt. Aktuell beschäftigt er sich mit dem Einsatz von KI im Content-Marketing.
Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.
Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.