Final

Ein Quiz über Responsive Design zum Abschluss. Testet euer Wissen - die Antworten werden nur lokal in eurem Browser gespeichert.

Wozu dient <meta name="viewport" content="width=device-width, initial-scale=1">?

• Sagt dem Browser, die tatsächliche Gerätebreite als Viewport-Breite zu verwenden, statt einer künstlichen Desktop-Breite
• Setzt die Bildschirmauflösung des Geräts

  Die physische Auflösung lässt sich per CSS/HTML nicht verändern.

• Aktiviert Media Queries - ohne diesen Tag funktionieren @media-Regeln gar nicht

  @media funktioniert grundsätzlich auch ohne den Tag - aber auf dem Handy würde die falsche (zu breite) Viewport-Breite angenommen, wodurch Breakpoints ins Leere laufen.

• Ist nur für SEO relevant, hat keinen Effekt auf die Darstellung

Ein Smartphone hat 360 CSS-Pixel auf 1080 echten Pixeln Breite. Wie hoch ist die Device Pixel Ratio?

• 1
• 2
• 3
• 360

Was bedeutet “Mobile First” beim Schreiben von Media Queries?

• Basis-Styles gelten für schmale Bildschirme, mit min-width werden Ergänzungen für mehr Platz hinzugefügt
• Die Seite wird ausschließlich für Smartphones gebaut, Desktop-Nutzer*innen sehen dieselbe Ansicht
• Man schreibt zuerst max-width-Regeln für den Desktop und schränkt dann für kleinere Bildschirme ein

  Das ist der umgekehrte, “Desktop First”-Ansatz - genau das Gegenteil von Mobile First.

• Es bedeutet, dass JavaScript vor dem CSS geladen werden muss

Ein Team will größere Klickflächen für Geräte mit ungenauer (Finger-)Eingabe anzeigen. Welches Media Feature passt?

• orientation: portrait

  Das beschreibt die Ausrichtung des Bildschirms, nicht die Eingabegenauigkeit.

• pointer: coarse
• prefers-contrast: more
• hover: none

  hover: none beschreibt, ob überhaupt gehovert werden kann - für die Eingabegenauigkeit ist pointer das passendere Feature.

Warum ist prefers-reduced-motion wichtig?

• Es spart Akku auf mobilen Geräten - der einzige Grund

  Ein netter Nebeneffekt, aber der Hauptgrund ist Barrierefreiheit für Menschen mit vestibulären Störungen.

• Für manche Menschen können große Animationen körperliches Unwohlsein auslösen - das ist eine Frage der Barrierefreiheit
• Es ist nur ein Performance-Feature ohne Bezug zu Nutzer*innen-Bedürfnissen
• prefers-reduced-motion deaktiviert automatisch JavaScript auf der Seite

Eine wiederverwendbare Card-Komponente soll sich unterschiedlich verhalten, je nachdem ob sie in einer schmalen Sidebar oder einer breiten Hauptspalte liegt. Was ist die passendere Wahl?

• Eine normale Media Query mit @media (min-width: ...)

  Media Queries kennen nur die Breite des gesamten Viewports, nicht die des jeweiligen Eltern-Containers.

• Eine Container Query mit @container (min-width: ...)
• @supports (display: grid)
• Das ist mit reinem CSS grundsätzlich nicht lösbar

Wozu dient @supports (display: grid) { ... }?

• Die enthaltenen Regeln gelten nur, wenn der Browser display: grid versteht
• Es prüft, ob der Bildschirm mindestens Grid-Breite hat

  Das wäre eine Media Query (@media), keine Feature Query.

• Es aktiviert CSS Grid global für die ganze Seite
• Es ist eine veraltete, nicht mehr unterstützte Syntax

Was ist notwendig, damit light-dark(weiß, schwarz) funktioniert?

• Nichts, light-dark() funktioniert immer ohne weitere Angaben

  color-scheme: light dark im :root ist zwingend notwendig.

• color-scheme: light dark; muss z.B. im :root gesetzt sein
• Ein <meta name="color-scheme">-Tag im <head>
• Ein zusätzliches JavaScript, das den Systemmodus abfragt

Quiz-Fortschritt

0 / 0 Fragen beantwortet (0%)

0 richtig