HTML und CSS/responsives Mehrspaltenlayout: Unterschied zwischen den Versionen

Version vom 31. Juli 2020, 08:07 Uhr

Schon längst werden Webseiten nicht nur am Schreibtisch, sondern auch auf mobilen Geräten mit kleinen Viewports angeschaut.

Aufgabe

Informiere Dich über responsives Webdesign
Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.
(Oft bedeutet dies, eben gar keine Breitenangaben zu setzen!)

Aufgabe

Mit media queries kannst Du verschiedene CSS-Regelsätze für verschiedene Breiten festlegen.
Erstelle eine aside-Box, die sich
- auf schmalen Geräten unterhalb …
- auf breiteren Viewports neben dem Seiteninhalt befinde

@@ Zeile 1: / Zeile 1: @@
-=== responsives Webdesign ===
+== responsives Webdesign ==
 Schon längst werden Webseiten nicht nur am Schreibtisch, sondern auch auf mobilen Geräten mit kleinen Viewports angeschaut.
+[[Datei:Brad-Forst-this-is-not-the-web.gif|800px]]
+{{clear}}
+{{Aufgabe|
 # Informiere Dich über [https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign responsives Webdesign]
-# Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.
+# Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.<br>(Oft bedeutet dies, eben gar keine Breitenangaben zu setzen!)
+}}
+=== Media Queries ===
+{{Aufgabe|
 # Mit media queries kannst Du verschiedene CSS-Regelsätze für verschiedene Breiten festlegen.
+# Erstelle eine aside-Box, die sich
+#* auf schmalen Geräten '''unterhalb''' &hellip;
+#* auf breiteren Viewports '''neben''' dem Seiteninhalt befinde
+}}
-=== Media Queries ===
+* [[https://wiki.selfhtml.org/wiki/CSS/Media_Queries|media queries]] (Tutorial, selfhtml.org)
 === Grid Layout ===
+* [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid|Einstieg in das Grid Layout]] (Mehrteiliges Tutorial, selfhtml.org)
 {{HTML und CSS}}