Adaptive/Responsive Design

• Flexibles Design
• Unterschiedliche Gestaltung der Seite je nach Ausgabemedium
• Begründet in großer Vielfalt von Geräten (große Touchscreens, Fernseher, kleine Handys, unbekanntes/zukünftiges Gerät)
• z. B. Mobile Blöcke untereinander und Desktop nebeneinander anordnen

Adaptiv vs. Responsive: Entscheidung basierend auf Nutzeranalyse

Media queries

• Abfrage auf Eigenschaften des Ausgabemediums als Bedingung für CSS Deklarationen
• Vorraussetzung: viewport im HTML head setzen
• relative Maßeinheiten verwenden (em, %, vw, vh)
• Definition:
  • @media Selektor oder media Attribut in style/link Tag
  • Definition von Breakpoints (max-width, min-width)
  • weitere Eigenschaften z. B. orientation(landscape/portrait), pointer (fine=Mauszeiger, coarse=Touch, none)
  • mehrere Voraussetzungen verbinden mit and oder or; Verneinen mit not
  • Medientyp als erste Eigenschaft: screen, print, all (bzw. weglassen)
• Hinweis: Touch-Device kann in Browser Entwicklungsumgebung simuliert werden

Code@media Medientyp and|not (Eigenschaft: Wert) and|or|not (Eigenschaft: Wert) {
  /*CSS Regeln*/
}

❮❯HTML<div>test1</div>
<div>test2</div>

❮❯CSSbody {
  background-color: red;
}

@media (min-width: 20em) {
  body {
    background-color: green;
  }
  div {
    display: inline;
  }
}