Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Was ist responsives Webdesign? | Responsives Webdesign in CSS
Fortgeschrittene CSS-Techniken

bookWas ist responsives Webdesign?

Moderne Webentwicklung ist ohne adaptive/responsive Designs nicht vorstellbar. Dadurch können Nutzer Webressourcen auf jedem Gerät gleichermaßen verwenden: Smartphone, Tablet, Desktop oder Fernseher.

Wie funktioniert das?

  1. Das Entwicklungsteam definiert, wie jedes Element je nach Bildschirmgröße dargestellt wird;
  2. Die notwendigen Anweisungen werden im Code festgelegt;
  3. Der Browser überwacht Änderungen des Viewports;
  4. Der Browser wendet die vom Entwicklungsteam im Code festgelegten Regeln an.

Media-Queries

Media-Query ermöglicht adaptive/responsive Designs. Mithilfe dieser Abfragen können Entwickler die Stile jedes Elements abhängig von der Bildschirmgröße festlegen.

Hinweis

Media-Query kann als Anweisung verstanden werden: "Wenn der Bildschirm des Nutzers ein Desktop ist, wende solche Stile auf das Element an. Wenn der Bildschirm des Nutzers ein Smartphone ist, wende andere Stile auf das Element an. Und so weiter.".

Die grundlegende Syntax der Media-Query ist wie folgt:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> – deklariert den Gerätetyp. Mögliche Werte:
    • all – Standardwert. Wenn nichts angegeben ist, gilt die Media-Regel für alle Geräte;
    • print – die Media-Regel gilt für Geräte, die gedruckte Dokumente erzeugen, wie Drucker;
    • screen – die Media-Regel gilt für alle Geräte mit physischem Bildschirm.
  2. <media_feature> – deklariert Geräteeigenschaften. Häufigste Verwendung:
    • min-width: – die minimale Breite des Viewports;
    • max-width: – die maximale Breite des Viewports.
  3. <operator> – Media-Type und Media-Feature werden durch den optionalen logischen Operator getrennt. Mögliche Werte: and oder ,.

Hinweis

In den folgenden Kapiteln wird die praktische Anwendung von Media-Queries behandelt.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 1

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you give an example of a media-query in CSS?

What are some common use cases for media-queries?

How do I choose between adaptive and responsive design?

Awesome!

Completion rate improved to 2.04

bookWas ist responsives Webdesign?

Swipe um das Menü anzuzeigen

Moderne Webentwicklung ist ohne adaptive/responsive Designs nicht vorstellbar. Dadurch können Nutzer Webressourcen auf jedem Gerät gleichermaßen verwenden: Smartphone, Tablet, Desktop oder Fernseher.

Wie funktioniert das?

  1. Das Entwicklungsteam definiert, wie jedes Element je nach Bildschirmgröße dargestellt wird;
  2. Die notwendigen Anweisungen werden im Code festgelegt;
  3. Der Browser überwacht Änderungen des Viewports;
  4. Der Browser wendet die vom Entwicklungsteam im Code festgelegten Regeln an.

Media-Queries

Media-Query ermöglicht adaptive/responsive Designs. Mithilfe dieser Abfragen können Entwickler die Stile jedes Elements abhängig von der Bildschirmgröße festlegen.

Hinweis

Media-Query kann als Anweisung verstanden werden: "Wenn der Bildschirm des Nutzers ein Desktop ist, wende solche Stile auf das Element an. Wenn der Bildschirm des Nutzers ein Smartphone ist, wende andere Stile auf das Element an. Und so weiter.".

Die grundlegende Syntax der Media-Query ist wie folgt:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> – deklariert den Gerätetyp. Mögliche Werte:
    • all – Standardwert. Wenn nichts angegeben ist, gilt die Media-Regel für alle Geräte;
    • print – die Media-Regel gilt für Geräte, die gedruckte Dokumente erzeugen, wie Drucker;
    • screen – die Media-Regel gilt für alle Geräte mit physischem Bildschirm.
  2. <media_feature> – deklariert Geräteeigenschaften. Häufigste Verwendung:
    • min-width: – die minimale Breite des Viewports;
    • max-width: – die maximale Breite des Viewports.
  3. <operator> – Media-Type und Media-Feature werden durch den optionalen logischen Operator getrennt. Mögliche Werte: and oder ,.

Hinweis

In den folgenden Kapiteln wird die praktische Anwendung von Media-Queries behandelt.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 1
some-alt