lab-development-imb/web/13/labor/13_aufgaben.md

Übungsblatt 13

Für das gesamte Übungsblatt ist keine Abgabe erforderlich.

1. Übung zu Responsive Design: Media Queries

Frage: Welche Media Query trifft auf welches Gerät zu?

a. Smartphone: 320 x 480px

b. Smartphone quer gehalten: 960 x 640px

c. PC-Bildschirm: 1600 x 900px mit Browserfenster: 800 x 500px

d. Tablet quer gehalten: 2048 x 1539px

Hinweis: device-width ist bei Smartphones und Tablets immer die kürzere Seite des Geräts – sie dreht sich beim Querhalten nicht mit.
Der Viewport (width/height) dagegen dreht sich mit der Geräteausrichtung und ändert dabei seine Breite und Höhe.

@media screen

@media screen and (max-width: 800px)

@media screen and (orientation: portrait)

@media screen and (min-device-width: 900px)

@media screen and (min-width: 900px)

@media print and (min-width: 30cm)

@media screen and (max-device-height: 1400px)

2. Übung zu Barrierefreiheit

Aufgabenstellung: Gegen welche WCAG-Erfolgskriterien verstößt folgendes Web-Kontaktformular?