Zielsetzung

Experimente

Hier siehst du eine Beispielseite des Projekts mit dem Design in der CSS-Datei (links) und dem Inhalt in der HTML-Datei (Links).

Aufgabe 1:

(a) Wähle rechts oben unter dem Reiter Responsive Design verschiedene Breiten aus und schaue dir die Webseite auch speziell für Smartphones an.

(b) 💬 Spreche mit deinem Nachbar / deiner Nachbarin über mögliche alternative Darstellungsformen am Smartphone und über Nachteile der aktuellen Darstellungsform.

(c) Wähle rechts neben der Überschrift "Quelltext CSS" die CSS Datei styles-angepasst.css aus und wechsle erneut die Breite des Fensters. Beobachte die Änderungen.

Entwicklertools

Moderne Browser enthalten sogenannte Entwickler-Tools, mit denen man die „Vorderseite“ und „Rückseite“ gleichzeitig betrachten kann. Die Tastenkombination „Strg.“ + „Umschalt“ + „I“ oder Rechtsklick + „Untersuchen“ öffnet in der Regel die Entwickler-Tools.

Aufgabe 2

Lade das Beispiel herunter, rufe die HTML-Datei im Browser auf und öffne die Entwickler-Tools.

In der Regel gibt es dort einen Reiter zum Testen der Bildschirmgrößen einer Anzeige (hier das Smartphone und das Tablet ganz rechts), wähle diesen Reiter aus:

(a) Teste die Ansicht bei verschiedenen Bildschirmgrößen.

(b) Verändere in der HTML-Datei in Zeile 6 die Referenz zur CSS-Datei zu styles-angepasst.css und teste erneut verschiedene Bildschirmgrößen.

(c) ✏️️ In der CSS-Datei styles-angepasst.css findest du verschiedene Medienabfragen @media ....
Analysiere durch Ausprobieren der einzelnen Anzeigen im Browser die Medienabfragen und notiere ihre Bedeutung.

Medienabfragen / Media Queries

Mit Medienabfragen kann man in CSS unterschiedliche Bedingungen für verschiedene Medien und Anzeigeformate festlegen.

Beispiel:

          @media (width: 60em) {/*Breite der Anzeige entspricht genau 60em*/}
        @media (min-width: 300px) {/*Breite der Anzeige entspricht mindestens 300 Pixeln*/}
        @media (orientation: portrait) {/*Breite der Anzeige ist im Hochformat*/}
        @media (orientation: portrait) and (width < 40em) {/*Hochformat und Breite kleiner als 40em*/}
    
    

<p>
    Beachte: Relative Angaben, wie das Ma&szlig; der verwendeten Schriftgr&ouml;&szlig;e <code>em</code> bieten sich eher an, da man z.B. bei Pixel bei hochaufl&ouml;senden Bildschirmen aus mehreren Ger&auml;tepixeln bestehen k&ouml;nnen.
</p>
<p>
    Weitere Informationen zu Medienabfragen findest du auch bei <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries">Self-HTML</a>.
</p>

Aufgabe 3

Mache die Seiten deines Projektes responsive, indem du sie an verschiedene Anzeigen anpasst.