forked from WEB-IMB-WS2526/lab-development-imb
70 lines
1.3 KiB
Markdown
70 lines
1.3 KiB
Markdown
# Ü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.
|
||
|
||
1.
|
||
```css
|
||
@media screen
|
||
```
|
||
|
||
2.
|
||
```css
|
||
@media screen and (max-width: 800px)
|
||
```
|
||
|
||
3.
|
||
```css
|
||
@media screen and (orientation: portrait)
|
||
```
|
||
|
||
4.
|
||
```css
|
||
@media screen and (min-device-width: 900px)
|
||
```
|
||
|
||
5.
|
||
```css
|
||
@media screen and (min-width: 900px)
|
||
```
|
||
|
||
6.
|
||
```css
|
||
@media print and (min-width: 30cm)
|
||
```
|
||
|
||
7.
|
||
```css
|
||
@media screen and (max-device-height: 1400px)
|
||
```
|
||
|
||
## 2. Übung zu Barrierefreiheit
|
||
|
||
|
||
**Aufgabenstellung**: Gegen welche WCAG-Erfolgskriterien verstößt folgendes Web-Kontaktformular?
|
||
|
||
|
||
|