Responsive Design
als Präsentation ▻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.
Css Code CSS mit Mediaqueries
@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
).
Css Code CSS Medaqueries für color-scheme
/* 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
▻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">