Responsive Design

vorige Präsentation: Mobile | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Progressive Web App

Wie wir im Kapitel CSS Layout - Responsive Design gelernt haben kann man mit CSS Mediaqueries auf die Größe und Pixeldichte das Ausgabegeräts reagieren und die Webseite verschieden formatieren.

Wiederholung: Mediaqueries

Mediaqueries erlauben eine “Verzweigung” in CSS.

@media screen and (max-width: 480px) {
  .column {
    width: 100px;
  }
  /* weitere Regeln für kleine Screens */
}
/* allgemein gültige Regeln */

Auch die Eingabemethode kann mit Mediaqueries abgefragt werden. Ein Smartphone oder Tablet ist meist ein Gerät ohne hover und mit einem groben Cursor (pointer: coarse).

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

siehe auch MDN: media features und MDN: features queries

Demo: Mediaqueries

Wiederholung: Vektor-Grafik

Das Format SVG ist für mobile Geräte sehr gut geeignet, wie wir schon in CSS Layout - Responsive Design und Grafik - SVG gelernt haben. Die Einbindung erfolgt mit dem img-Tag oder direkt im HTML.

<img src="circle.svg">

Responsive Design

vorige Präsentation: Mobile | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Progressive Web App