< HTML und CSS(Unterschied zwischen Seiten)
|
|
| Zeile 1: |
Zeile 1: |
| == responsives Webdesign ==
| | [[/Grundvorstellungen zum Ableitungsbegriff/]] |
| 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]] | | [[/Applet/]] |
| {{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.<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''' …
| |
| #* auf breiteren Viewports '''neben''' dem Seiteninhalt befinde
| |
| }}
| |
| | |
| * [[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}}
| |
Version vom 26. August 2020, 07:35 Uhr
