'@media' Queries

Die Auswahl der richtigen Medienabfrage-Größen hängt stark von der Art der Website, den Designzielen und den Inhalten ab. Hier sind einige gängige Medienabfrage-Größen und ihre Verwendungszwecke als Orientierungshilfe:

Es ist zu beachten, dass die genauen Medienabfrage-Größen je nach Projekt variieren können. Die oben genannten Größen dienen als Ausgangspunkt, und du solltest sie entsprechend deiner Zielgruppe und deiner Website anpassen.

Reihenfolge der Medienabfragen im CSS-Code: Die Reihenfolge der Medienabfragen im CSS-Code ist entscheidend. CSS-Regeln werden von oben nach unten angewendet. Wenn zwei oder sogar drei Regeln auf dasselbe Element abzielen, wird die letzte Regel im Code umgesetzt. Die erste ist für Bildschirme mit einer Breite bis 767px, die zweite für Bildschirme mit einer Breite von 768px bis 1023px und die dritte für Bildschirme mit einer Breite von 1024px und mehr:

/* Zuerst die erste Medienabfrage für Mobilgeräte mit einer maximalen Breite von 767px */
@media screen (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

/* Folgt die zweite Medienabfrage für Tablets mit einer Breite von 768px bis 1023px */
@media screen (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 17px;
  }
}

/* Dann die dritte Medienabfrage für Bildschirme mit einer Breite von 1024px und mehr */
@media screen (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

Wenn du die Reihenfolge umdrehst und zuerst die zweite oder dritte Medienabfrage setzt und dann die erste, passiert Folgendes: Zuerst werden die Stile für Bildschirme mit einer Breite von 1024px und mehr angewendet. Die erste Medienabfrage wird ignoriert, da sie denselben Bereich wie die zweite abdeckt, und die Stile aus der zweiten Medienabfrage überschreiben die ersten.

Best Practices: Die Reihenfolge also logisch und entspricht den üblichen "Best Practices" (Empfohlene Vorgehensweise) für die Verwendung von Media Queries in CSS. Es ist konform, dass die Regeln für kleinere Bildschirme zuerst definiert werden und dann bei Bedarf für größere Bildschirme überschrieben werden.

mobile-first-Designprinzipien: Es ist auch ratsam, "mobile-first-Designprinzipien" zu verwenden, bei denen du mit der Gestaltung für mobile Geräte beginnst und dann die Anpassungen für größere Bildschirme hinzufügst.

Bildschirmgrößen

Übersicht der gängigsten Bildschirmgrößen, zusammen mit den dazu passenden @media Queries:

• Merke: Je spezifischer (also je kleiner der max-width-Wert), desto höher die Priorität.

Ergänzte Gruppenstruktur

CSS Beipiele

Erste Variante:

/* Kleine Bildschirme (bis 768px, Smartphones) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
        font-size: 14px;
    }
}

/* Mittlere Bildschirme (768px bis 1024px, Tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 20px;
        font-size: 16px;
    }
}

/* Normale Bildschirme (1025px bis 1440px, Standard-Desktops) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        padding: 30px;
        font-size: 18px;
    }
}

/* Große Bildschirme (1441px bis 3839px, Full-HD bis 2K) */
@media (min-width: 1441px) and (max-width: 3839px) {
    .container {
        padding: 40px;
        font-size: 20px;
    }
}

/* Sehr große Bildschirme (ab 3840px, 4K und höher) */
@media (min-width: 3840px) {
    .container {
        padding: 60px;
        font-size: 24px;
    }
}

Oder? –zweite Variante:

/* Kleine Bildschirme (bis 768px, Smartphones) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
        font-size: 14px;
    }
}

/* Mittlere Bildschirme (768px bis 1024px, Tablets) */
@media (max-width: 1024px) {
    .container {
        padding: 20px;
        font-size: 16px;
    }
}

/* Normale Bildschirme (1025px bis 1440px, Standard-Desktops) */
@media (max-width: 1440px) {
    .container {
        padding: 30px;
        font-size: 18px;
    }
}

/* Große Bildschirme (1441px bis 3839px, Full-HD bis 2K) */
@media (max-width: 3839px) {
    .container {
        padding: 40px;
        font-size: 20px;
    }
}

/* Sehr große Bildschirme (ab 3840px, 4K und höher) */
@media (min-width: 3840px) {
    .container {
        padding: 60px;
        font-size: 24px;
    }
}

Unterschiede und Auswirkungen

• Erste Variante:
  • Mit der Verwendung von min-width und max-width ist jede Regel spezifisch für ihren Bereich definiert.
  • Dies stellt sicher, dass die Stile innerhalb eines klar definierten Rahmens angewendet werden und nicht mit anderen Regeln überschrieben werden.
  • Es ermöglicht auch eine gezielte Anpassung für den Übergang zwischen den Bildschirmgrößen.
• Zweite Variante:
  • Bei dieser Struktur wird die Regel für max-width für alle Breiten bis zu dem angegebenen Wert angewendet.
  • Das bedeutet, dass die Regeln sich überschneiden können. Zum Beispiel wird die Regel für max-width: 1024px auch für 768px gelten, da diese Bedingung ebenfalls erfüllt ist.
  • Dies kann zu unerwarteten Ergebnissen führen, wenn nicht korrekt geplant, da eine Regel für größere Bildschirme die für kleinere Bildschirme beeinträchtigen kann.

Fazit

Die erste Variante ist in der Regel die empfohlene Methode, da sie mehr Kontrolle und Klarheit über die spezifischen Breiten gibt, für die die Stile gelten sollen. Die zweite Variante kann in bestimmten Szenarien auch funktionieren, ist jedoch anfälliger für unerwünschte Überschneidungen. Daher ist es besser, die Struktur der ersten Variante beizubehalten, um eine konsistente und vorhersehbare Gestaltung zu gewährleisten.

Für weiterführende Informationen und tiefergehende Details besuche:

Folgendes ist im Zusammenspiel mit fachlicher Dienste entstanden und geht über das hinaus, was im Tab 1 besprochen wurde. Es richtet sich mehr an Personen, die sich als Anfänger in Webdesign befinden. Dennoch ist es für jeden Webmaster lesenswert!

Einführung in '@media' Queries

Media Queries sind ein entscheidendes Werkzeug im Werkzeugkasten eines Webdesigners. Sie ermöglichen Websites, sich an die unterschiedlichen Bildschirmgrößen und Gerätetypen anzupassen, um ein optimales Benutzererlebnis zu gewährleisten.

Im Wesentlichen handelt es sich bei Media Queries um CSS-Regeln, die es Webentwicklern ermöglichen, den Inhalt und das Layout einer Website basierend auf den Merkmalen des Anzeigegeräts anzupassen. Dazu gehören Bildschirmbreite, Höhe, Auflösung und sogar den verwendeten Farbraum. Durch die Verwendung von Media Queries kann eine Website beispielsweise auf einem Smartphone anders dargestellt werden als auf einem Desktop-Computer.

Ein weiterer wichtiger Aspekt von Media Queries ist die Fähigkeit, Inhalte für druckbare Medien zu optimieren. Durch die Festlegung von Media Queries können Entwickler die Darstellung einer Website für den Druck anpassen, um sicherzustellen, dass gedruckte Seiten gut aussehen und keine überflüssigen Elemente enthalten.

Bereit, in die Welt der Media Queries einzutauchen? Lass uns loslegen!

1. Mobile-First-Design: Mobile-First-Design ist heute ein Eckpfeiler der Webentwicklung. Es ist im Einklang mit der wachsenden Verwendung von Mobilgeräten wie Smartphones und Tablets, um auf Websites zuzugreifen.
2. Best Practices für '@media' Queries: Erfahre mehr über bewährte Praktiken, einschließlich der korrekten Anordnung von Medienabfragen, der Verwendung von Breakpoints und der Auswahl geeigneter Einheiten wie em oder rem.
3. Arbeiten mit Medienabfrage-Größen: Vertiefe dein Verständnis, durch detaillierte Beispiele für gängige Medienabfrage-Größen und deren Verwendungszwecke.
4. Tipps für die Umsetzung: Erhalte praktische Ratschläge und Tipps zur Implementierung von Media Queries in CSS und HTML. Vermeide typische Fehler.
5. Testen und Debuggen von Media Queries: Lerne, wie du deine Media Queries testen und Fehler beheben kannst, um ein reibungsloses Erlebnis zu gewährleisten.
6. Zukunft von '@media' Queries: Wirf einen Blick auf die Entwicklungen im Bereich der Media Queries, darunter CSS Grid und Flexbox.
7. Beispiele und Tutorials: Schau dir praktische Beispiele und Tutorials an, um die Umsetzung von Media Queries zu meistern.

1. Mobile-First-Design:
Das Konzept des Mobile-First-Designs ist heutzutage ein Schlüsselaspekt in der Webentwicklung. Es steht im Einklang mit der steigenden Verwendung von mobilen Geräten, wie Smartphones und Tablets, um auf Websites zuzugreifen. Dabei liegt der Fokus auf Benutzerfreundlichkeit, Performance und einer klaren, einfachen Gestaltung. Daher ist es entscheidend, Websites von Grund auf so zu gestalten, dass sie zuerst auf mobilen Geräten gut funktionieren und dann für größere Bildschirme erweitert werden.

Ein entscheidender Vorteil des Mobile-First-Ansatzes besteht darin, dass er dazu führt, dass Websites schneller geladen werden und besser auf langsamen mobilen Verbindungen funktionieren. Dies ist besonders wichtig, da die Ladezeiten auf mobilen Geräten oft kritischer sind als auf Desktop-Computern.

Sobald die mobile Version einer Website optimiert ist, können Webdesigner Media Queries verwenden, um das Layout und die Inhalte für größere Bildschirme anzupassen. Dies ermöglicht es, die Benutzerfreundlichkeit und das Erscheinungsbild der Website auf Desktops und Tablets zu verbessern, ohne die mobile Version zu vernachlässigen.

Ein weiterer Vorteil des Mobile-First-Designs besteht darin, dass es die Suchmaschinenoptimierung (SEO) verbessern kann. Google und andere Suchmaschinen bewerten die mobile Benutzerfreundlichkeit einer Website höher und belohnen sie mit höheren Suchrankings.

2. Best Practices für '@media' Queries:
Media Queries sind ein mächtiges Werkzeug zur Erstellung responsiver Websites. Damit sie effektiv eingesetzt werden können, ist es wichtig, bewährte Praktiken zu befolgen. Hier sind einige Tipps, um das Beste aus deinen Media Queries herauszuholen:

• Klare und beschreibende Medienabfragen verwenden: Die Medienabfragen sollten klar und präzise sein. Anstatt unverständliche Abfragen wie "max-width: 768px" sind besser beschreibende Angaben wie "max-width: 767px" für mobile Geräte und "min-width: 768px" für größere Bildschirme.
• Mit den kleineren Bildschirmen anfangen: Wie bereits erwähnt, ist der Mobile-First-Ansatz eine bewährte Praxis. Mit dem Styling für mobile Geräte beginnen und sich dann zu größeren Bildschirmen vorarbeiten. Dies stellt sicher, dass die Website von Anfang an auf kleinen Bildschirmen gut aussieht.
• Die Regeln einfach halten: Die Media Queries sollten nicht überladen sein. Diese sind so einfach wie möglich zu halten und nur der notwendigen Anpassungen sein. Je komplexer die Medienabfragen, desto schwerer sind sie zu warten und zu verstehen.
• Auf verschiedenen Geräten testen: Die Website auf einer Vielzahl von Geräten prüfen, um sicherzustellen, dass die Media Queries ordnungsgemäß funktionieren. Dies umfasst Smartphones, Tablets, Desktops und andere Geräte, die auf die Zielgruppe zutreffen.
• Mit einer klaren Struktur arbeiten: Die CSS-Dateien so organisieren, dass die Medienabfragen leicht zu finden und zu bearbeiten sind. Eine klare Struktur erleichtert die Wartung und das Hinzufügen neuer Medienabfragen.
• An bewährte Praktiken für die Leistung halten: Media Queries können die Ladezeiten beeinflussen, insbesondere auf mobilen Geräten. Bilder und Ressourcen sollten optimiert sein, um die Website schnell zu laden.
• Medienabfragen an die Zielgruppe anpassen: Die Auswahl der richtigen Medienabfrage-Größen hängt von der Zielgruppe ab. Wenn das beispielsweise eine Website für Fotografen ist, sind größere Bildschirme wichtiger. Analysiere die Zielgruppe und passe die Medienabfragen entsprechend an.
• Auf dem neuesten Stand bleiben: Die Webentwicklung ist ständigen Veränderungen unterworfen. Neue Geräte und Bildschirmgrößen kommen ständig auf den Markt. Sich über die neuesten Entwicklungen auf dem Laufenden halten und die Media Queries bei Bedarf aktualisieren.

Diese bewährten Praktiken sind, um sicherzustellen, dass die Media Queries effektiv und benutzerfreundlich sind. Damit ist sicherstellt, dass die Website auf allen Geräten eine großartige Erfahrung bietet.

4. Arbeiten mit Medienabfrage-Größen:
Bei der Gestaltung von responsiven Websites ist die Auswahl der richtigen Medienabfrage-Größen von Bedeutung. Die Größen, bei denen die Website ihr Layout anpasst, sollten sorgfältig ausgewählt werden. Hier sind einige bewährte Praktiken und gängige Medienabfrage-Größen, die bei der Arbeit mit Media Queries helfen können:

• Mobile Geräte (Smartphones):
  • Maximal 767px Breite: Dies ist die Standardgröße für mobile Geräte. Hier sollten die Media Queries für Smartphones beginnen.
• Tablets:
  • 768px bis 1023px Breite: Tablets haben größere Bildschirme als Smartphones, aber sie sind immer noch im kleineren Bereich. Hier das Layout anpassen für eine optimale Tablet-Erfahrung.
• Kleine Desktops und Laptops:
  • 1024px bis 1279px Breite: Dies sind die Bildschirmgrößen, die für kleinere Desktop- und Laptop-Computer gelten. Hier können spezifische Anpassungen vorgenommen werden.
• Standard-Desktops und Laptops:
  • Ab 1280px Breite: Dies sind die typischen Bildschirmgrößen für Standard-Desktops und Laptops. Das Layout für größere Bildschirme ist hier zu optimieren.
• Große Bildschirme (4K, Ultrawide):
  • Ab 2560px Breite: Für wirklich große Bildschirme, wie 4K-Monitore oder Ultrawide-Displays sind für spezielle Anpassungen.

Es ist zu beachten, dass diese Größen als Ausgangspunkt dienen. Je nach dem Projekt und der Zielgruppe können sich die Anforderungen ändern. Die Webstie sollte auf den wichtigsten Bildschirmgrößen immer gut aussehen.

Außerdem ist es ratsam, den "Mobile-First-Ansatz" zu verfolgen. Dies bedeutet, dass zuerst das Layout für mobile Geräte erstellt wird und dann Anpassungen für größere Bildschirme. Dies stellt sicher, dass die Website auf kleinen Bildschirmen gut funktioniert und dann auf größeren Bildschirmen erweitert wird.

Mit diesen gängigen Medienabfrage-Größen und bewährten Praktiken ist mit Media Queries effektiv zu arbeiten und somit eine responsive Website zu erstellen, die auf verschiedenen Geräten großartig aussieht.

5. Tipps für die Umsetzung:
Um die Wirksamkeit von Media Queries zu gewährleisten, sollten bewährte Praktiken beachtet werden. Hier sind einige wertvolle Tipps für die erfolgreiche Umsetzung von Media Queries:

• Auf verschiedenen Geräten testen: Die Website auf verschiedenen Geräten testen, um sicherzustellen, dass die Media Queries wie erwartet funktionieren. Dabei sollten verschiedene Bildschirmgrößen und -auflösungen berücksichtigt werden, um sicherzustellen, dass die Anpassungen reibungslos erfolgen.
• Auf die Benutzererfahrung fokussieren: Stelle sicher, dass die Inhalte und die Benutzeroberfläche auf allen Bildschirmgrößen gut lesbar und bedienbar sind. Dies ist entscheidend, um die Zufriedenheit der Besucher zu gewährleisten.
• Priorisiere Inhalte: In kleineren Bildschirmgrößen ist weniger Platz für Inhalte vorhanden. Priorisiere die Elemente und Informationen, die auf mobilen Geräten angezeigt werden sollen. Reduziere unnötigen Ballast und konzentriere dich auf das Wesentliche.
• Verwende flexible Einheiten: Bei der Definition von Größen in den Media Queries, insbesondere Schriftgrößen und Abstände, verwende flexible Einheiten wie "em" oder "rem". Dadurch passen sich diese Größen besser an verschiedene Bildschirmgrößen an.
• Regelmäßig testen: Das Webdesign und die Entwicklung sind iterative Prozesse. Teste die Media Queries regelmäßig und optimiere sie bei Bedarf. Neue Geräte und Bildschirmgrößen kommen ständig auf den Markt, daher ist es wichtig, die Website aktuell zu halten.
• Dokumentation: Erstelle eine klare Dokumentation der Media Queries und ihrer Zwecke. Dies erleichtert die Zusammenarbeit mit anderen Entwicklern und die spätere Wartung der Website.

Die effektive Umsetzung von Media Queries erfordert Sorgfalt, Tests und die Berücksichtigung der Benutzererfahrung. Indem man diese Tipps berücksichtigst, ist sicherstellen, dass die Website auf verschiedenen Geräten optimal funktioniert und ein ansprechendes Benutzererlebnis bietet.

6. Testen und Debuggen von '@media' Queries:
Die Entwicklung von Media Queries erfordert nicht nur das Schreiben von Code, sondern auch das Testen und Debuggen, um sicherzustellen, dass sie wie erwartet funktionieren. Hier sind einige bewährte Methoden, um Media Queries erfolgreich zu testen und Fehler zu beheben:

• Entwicklertools verwenden: Moderne Webbrowser bieten Entwicklertools, mit denen die Website auf verschiedenen Bildschirmgrößen und -geräten zu simulieren ist. Diese Funktionen nutzen, um die Auswirkungen der Media Queries in Echtzeit zu überprüfen.
• Responsives Design-Modus: Viele Browser, wie Google Chrome und Firefox, bieten einen responsiven Design-Modus, der es ermöglicht, die Website in verschiedenen Bildschirmgrößen anzuzeigen. So ist zwischen verschiedenen Geräten wie Smartphones, Tablets und Desktops wechseln, um die Anpassungen zu überprüfen.
• Geräteüberprüfung: Die Website auf realen Geräten testen, wenn möglich. Dies gibt ein genaues Bild davon, wie die Website auf verschiedenen Geräten aussieht und wie sie sich verhält.
• Code validieren: Sicherstellen, dass die Media Queries und das gesamte CSS korrekt geschrieben sind. Validierungstools können syntaktische Fehler erkennen, um sie zu beheben.
• Schrittweise Anpassungen: Bei Schwierigkeiten beim Debuggen, die Media Queries schrittweise hinzuzufügen und testen. Mit den grundlegenden Anpassungen beginnen und zu komplexeren Layouts vorarbeiten.
• Browser-Kompatibilität: Die Browser-Kompatibilität berücksichtigen. Media Queries werden von den meisten modernen Browsern gut unterstützt, aber es ist wichtig, sicherzustellen, dass sie in allen relevanten Browsern funktionieren.
• Protokollierung und Konsolenausgabe: Bei komplexen Media Queries kann man Protokollierung und Konsolenausgabe verwenden, um Informationen über den Status der Abfragen zu erhalten. Dies kann bei der Fehlersuche hilfreich sein.
• Kontinuierliches Testen: Da neue Geräte und Bildschirmgrößen ständig auf den Markt kommen, ist es wichtig, die Media Queries kontinuierlich zu testen und zu aktualisieren. Die Webentwicklung ist ein sich ständig veränderndes Feld, und eine regelmäßige Wartung ist erforderlich.

Das Testen und Debuggen von Media Queries ist entscheidend, um sicherzustellen, dass die Website auf verschiedenen Geräten optimal funktioniert. Wenn diese bewährten Methoden angewendet und regelmäßig getestet wird, so ist sicherzustellen, dass die responsiven Designs reibungslos arbeiten und ein großartiges Benutzererlebnis bieten.

7. Zukunft von '@media' Queries:
Media Queries haben die Art und Weise, wie wir Websites erstellen und gestalten, grundlegend verändert. In den letzten Jahren haben sie dazu beigetragen, dass Webdesign responsiver und benutzerfreundlicher wird. Doch die Entwicklung in der Welt des Webdesigns steht nie still, und auch für Media Queries gibt es Entwicklungen und Überlegungen zur Zukunft. Hier sind einige Aspekte, die die Zukunft von Media Queries beeinflussen könnten:

• Media Queries Level 4: Derzeit befinden wir uns bei Media Queries Level 3. Das World Wide Web Consortium (W3C) arbeitet jedoch bereits an Media Queries Level 4, das neue Funktionen und Möglichkeiten für Webdesigner bieten wird. Dies könnte eine noch genauere Kontrolle über die Gestaltung von Websites ermöglichen.
• Dynamische Anpassung: In der Zukunft könnten Media Queries noch dynamischer werden, indem sie sich in Echtzeit an die Benutzerinteraktion anpassen. Dies würde es ermöglichen, Websites noch besser an die Bedürfnisse und Präferenzen der Benutzer anzupassen.
• Bessere Unterstützung für Geräte mit variabler Bildschirmgröße: Mit der zunehmenden Verbreitung von Geräten mit variabler Bildschirmgröße, wie faltbaren Smartphones und Tablets, wird die Unterstützung dieser Geräte zu einer Herausforderung. Zukünftige Media Queries könnten verbesserte Lösungen für diese Geräte bieten.
• Integration von KI und maschinellem Lernen: Die Integration von künstlicher Intelligenz (KI) und maschinellem Lernen könnte die Erstellung von Media Queries erleichtern. KI-Systeme könnten automatisch die besten Anpassungen für verschiedene Geräte vornehmen.
• Optimierung für Barrierefreiheit: Barrierefreiheit im Webdesign gewinnt zunehmend an Bedeutung. Zukünftige Media Queries könnten die Möglichkeit bieten, Websites automatisch barrierefrei zu gestalten, indem sie Textgröße, Kontrast und andere Faktoren anpassen.
• Performance-Optimierung: Media Queries könnten auch dazu beitragen, die Leistung von Websites zu optimieren, indem sie unnötige Ressourcen auf Geräten mit geringer Bandbreite oder begrenzter Rechenleistung reduzieren.
• Neue Geräte und Technologien: Mit der Einführung neuer Geräte und Technologien, wie Augmented Reality (AR) und Virtual Reality (VR), könnten sich auch die Anforderungen an Media Queries ändern. Die Anpassung von Websites an diese Technologien wird in der Zukunft wichtig sein.

Die Zukunft von Media Queries verspricht aufregend zu sein, da sie dazu beitragen werden, das Webdesign weiter zu verbessern und den Benutzern ein optimales Erlebnis auf einer Vielzahl von Geräten zu bieten. Webdesigner sollten sich auf dem Laufenden halten und die Entwicklungen in diesem Bereich verfolgen, um sicherzustellen, dass sie die besten Praktiken und Technologien nutzen, um großartige Websites zu erstellen.

8. Beispiele und Tutorials:
Einer der besten Wege, Media Queries zu verstehen und zu beherrschen, besteht darin, sich Beispiele anzusehen und Tutorials zu folgen. Hier sind einige Ressourcen und Beispiele, die dir bei deinem Lernprozess helfen können:

• W3Schools: W3Schools bietet eine umfangreiche Sammlung von Tutorials und Beispielen zu HTML, CSS und Media Queries. Du findest hier schrittweise Anleitungen und Codebeispiele, die dir den Einstieg erleichtern.
• MDN Web Docs: Die Mozilla Developer Network (MDN) ist eine zuverlässige Quelle für Webentwicklungsinformationen. Auf ihrer Website findest du detaillierte Erklärungen zu Media Queries und praktische Beispiele.
• CSS-Tricks: CSS-Tricks ist eine Website, die sich auf CSS und Webdesign spezialisiert hat. Sie bietet viele Artikel und Tutorials zu Media Queries und verwandten Themen.
• Responsive Design Patterns: Diese Website bietet eine Sammlung von Beispielen für responsive Designs, die Media Queries verwenden. Du kannst die verschiedenen Muster durchgehen und den zugehörigen Code untersuchen.
• CodePen: Auf CodePen findest du zahlreiche Code-Beispiele von anderen Entwicklern. Du kannst nach Media Queries suchen und die Codes anderer Benutzer analysieren.
• YouTube-Tutorials: Es gibt viele Video-Tutorials auf Plattformen wie YouTube, die Media Queries erklären und praktische Anwendungen zeigen. Die visuelle Darstellung kann dir helfen, das Konzept besser zu verstehen.
• Responsive Frameworks: Es gibt auch responsive Frameworks wie Bootstrap und Foundation, die Media Queries verwenden. Du kannst die Dokumentation dieser Frameworks durchgehen, um zu lernen, wie sie Media Queries einsetzen.

Wenn du '@media' Queries lernen möchtest, ist zu empfehlen, mit einfachen Beispielen zu beginnen und dann zu komplexeren Projekten überzugehen. Mit verschiedenen Bildschirmgrößen experimentieren und lernen, wie das Layout der Website anzupassen ist, um ein optimales Benutzererlebnis zu bieten. Mit der Zeit entwickelt sich dafür ein Gefühl, wie man Media Queries effektiv einsetzt, um responsive Designs zu erstellen.

Beispiel: In der Seitenleiste sollte das Maskottchen "Wegerl" an die verschiedenen Bildschirmgrößen angepasst werden. Auf mobilen Geräten, wie Smartphones, war die Anpassung weitgehend problemlos, da die Bildschirmbreite ohnehin begrenzt ist. Dennoch sollten auch sie eine separate Größe im Vergleich zu Tablets, Desktops und Laptops erhalten.

/* Mobile Geräte: Breite von 320px bis 767px */
@media (max-width: 767px) {
    /* Stile für .svg-size4 auf mobilen Geräten */
    .svg-size4 {
        width: 250px;
        max-height: 138px;
        margin: 5% 20% 15%;
    }
}

/* Tablets und kleinere Desktops: Breite von 768px bis 1023px */
@media (min-width: 668px) and (max-width: 1023px) {
    /* Stile für .widget-title und .svg-size4 auf Tablets und kleineren Desktops */
    .widget-title {
        text-align: center;
    }
    .svg-size4 {
        width: 300px;
        max-height: 165px;
        margin: 0% 25% 10%;
    }
}

/* Größere Desktops: Breite von 1024px bis 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Stile für .svg-size4 auf größeren Desktops */
    .svg-size4 {
        width: 160px;
        max-height: 88px;
        margin: 20% -12% 20%;
    }
}

/* Große Bildschirme: Breite von 1280px und mehr */
@media (min-width: 1280px) {
    /* Stile für .svg-size4 auf großen Bildschirmen */
    .svg-size4 {
        width: 200px;
        max-height: 110px;
        margin: 20% -12% 20%;
    }
}

Weiteres Beispiel: Der Code @media all and (max-width: 1023px) ist grundsätzlich in Ordnung, da er eine klare und verständliche Medienabfrage für Bildschirme mit einer maximalen Breite von 1023 Pixeln definiert:

@media all and (max-width: 1023px) {
    .centriert {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 140px !important;
    }
}

Das Beispiel mit @media all and (max-width: 1023px) ist technisch korrekt. Es definiert eine Medienabfrage für alle Medientypen (daher das 'all') mit einer maximalen Breite von 1023 Pixeln.

Das 'all' in @media all bedeutet, dass diese Medienabfrage auf alle Medientypen angewendet wird, einschließlich Bildschirme, Drucker und andere Medienarten. Es ist die Standardbedingung und wird oft implizit angenommen, daher kann es in vielen Fällen weggelassen werden.

Das 'and' dient dazu, Bedingungen innerhalb der Medienabfrage zu kombinieren. In diesem Fall wird 'all' verwendet, um anzugeben, dass die Regeln für alle Medientypen gelten, und 'and (max-width: 1023px)' spezifiziert die maximale Breite für diese Medien.

Das Hinzufügen von 'all' ändert das Verhalten der Medienabfrage nicht wesentlich, da es in den meisten Fällen implizit ist. Es kann jedoch verwendet werden, um explizit zu erklären, dass die Regeln für alle Medientypen gelten.

Das all and kann in bestimmten Fällen bedeutsam sein, insbesondere wenn du komplexere Medienabfragen erstellst, bei denen du mehrere Bedingungen und Operatoren kombinierst. Ein häufiges Beispiel ist die Kombination von all mit anderen Medienfeatures wie max-width oder orientation. Hier ist ein Beispiel:

@media all and (max-width: 768px) and (orientation: portrait) {
    .mein-element {
        /* Hier werden Stile für das Element mit der Klasse "mein-element" definiert,
           wenn es auf Geräten mit einer Bildschirmbreite von maximal 768px im Hochformat angezeigt wird. */
        background-color: lightblue;
        font-size: 16px;
        padding: 10px;
    }
}

In diesem Beispiel werden die Stile nur auf das Element mit der Klasse mein-element angewendet, wenn es auf Geräten mit einer Bildschirmbreite von maximal 768px im Hochformat angezeigt wird. Das all in dieser Abfrage steht für "alle Medien", was bedeutet, dass diese Regeln auf alle Arten von Medien (Bildschirm, Druck, etc.) zutreffen. Das and wird verwendet, um zusätzliche Bedingungen hinzuzufügen.

Wie gesagt, in den meisten Fällen ist all jedoch implizit und wird nicht explizit angegeben, da es die Standardbedingung für Medienabfragen ist. Es kann nützlich sein, es nur dann hinzuzufügen, wenn man ausdrücklich alle Medienarten ansprechen möchte.