Was 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?
- Das Entwicklungsteam definiert, wie jedes Element je nach Bildschirmgröße dargestellt wird;
- Die notwendigen Anweisungen werden im Code festgelegt;
- Der Browser überwacht Änderungen des Viewports;
- 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 */
}
<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.
<media_feature>
– deklariert Geräteeigenschaften. Häufigste Verwendung:min-width:
– die minimale Breite des Viewports;max-width:
– die maximale Breite des Viewports.
<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.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
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
Was 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?
- Das Entwicklungsteam definiert, wie jedes Element je nach Bildschirmgröße dargestellt wird;
- Die notwendigen Anweisungen werden im Code festgelegt;
- Der Browser überwacht Änderungen des Viewports;
- 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 */
}
<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.
<media_feature>
– deklariert Geräteeigenschaften. Häufigste Verwendung:min-width:
– die minimale Breite des Viewports;max-width:
– die maximale Breite des Viewports.
<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.
Danke für Ihr Feedback!