Arbeitsblatt: BI12-LS6-3 Lerngebiet: Internetgerechte Dokumente entwickeln / Multimediaanwendungen

Lernsituation: Eine vorhandene Website für die Anzeige in verschiedenen Displaygrößen anpassen

Thema: Adaptive Layout 06-03-2023 Na Sharma

Arbeitsblatt A-1: Ein Grid-Schema für eine Smartphone Ansicht entwerfen

Bearbeiten Sie die folgenden Aufgaben in ihrer Lerngruppe.
Sie haben in der letzten Lernsituation einen Grid-Container für eine Desktop-Variante entwickelt.
1. Notieren Sie dessen Attributwerte unten im linken Kasten.
2. Entwerfen Sie nun einen Grid-Container für eine Smartphone-Variante. Ordnen Sie hierfür die Ras -
terbereiche neu an. Bestimmen Sie das neue Grid-Schema hierfür im rechten Kasten.
3. Bestimmen Sie anschließend die neuen Werte für Spaltenbreiten und Zeilenhöhen. Notieren Sie die-
se neuen Attributwerte im rechten Kasten.
4. Untersuchen Sie auch die Attributwerte für die Höhen- und Breitenangaben des Grid-Containers
selbst. Notieren Sie die neuen Attributwerte hierfür wiederum im rechten Kasten.

body { body {
height: loorn
; height: 100vn ;
width: 100%
; width: 100% ;
margin: auto; margin: auto;
display: grid; display: grid;
grid-template-rows: auto auto ;
1Er
grid-template-rows: 1Fr 5 Fr0,5Fr ;
grid-template-columns:200px1Fr 1Fr ; grid-template-columns: 1Fr4 Fr ;
grid-template-areas: grid-template-areas:
"header header
"header headerheader -

"nav main

SiroëFoo "Footer Footer

; ;
} }

Desktop-Variante Smartphone-Variante