Skip to content

V6_mediaqueries

Jump to bottom
hzuellig edited this page Mar 18, 2025 · 1 revision

Responsiveness

Worum geht es?
media queries

Das Konzept zu Responsive Web Design stammt von Ethan Marcotte.

“We should embrace the fact that the web doesn’t have the same constraints (as the print medium), and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’”

Er schrieb im Jahr 2010 einen Artikel auf Alistapart mit dem Titel «Responsive Web Design». https://alistapart.com/article/responsive-web-design
Die Konzepte, die in diesem Artikel formuliert wurden – media queries und darauf basierend CSS Angaben für gewisse Gerätebreiten – sind heute noch gültig.
Responsiveness wurde immer wichtiger, heute kommt oft der grösste Teil des Traffics von Besuchern mit mobilen Geräten. 2015 begann Google Websites zu degradieren, die nicht responsiv sind.

Fluidität

Fluidität bedeutet, das Layout so zu bauen, dass die Elemente sich dem Browserfenster anpassen können, wenn man das Fenster vergrössert/verkleinert oder das Device dreht. Konzepte dazu sind: Angaben in Prozent oder Viewport Width/Height (vw,vh) zu machen und/oder auf Flexbox mit seinen Properties flex-wrap oder flex-shrink, flex-grow, flex-basis zu setzen.

Flexible Units

  • Prozent (%)
  • Viewport Width / Height (vw / vh)

Flex Properties

  • flex-wrap
  • flex-grow / -shrink / -basis

Grid

  • fr (für Fraction)

Media Queries

Was sind Media Queries? Ganz grundsätzlich: mithilfe von Medienabfragen können Sie CSS-Stile abhängig vom Medientyp eines Geräts (z. B. Druck oder Bildschirm) oder von anderen Merkmalen oder Eigenschaften wie Bildschirmauflösung oder -ausrichtung, Seitenverhältnis, Breite oder Höhe des Browser-Viewports, Benutzerpräferenzen (z. B. reduzierte Bewegungen), Datenverbrauch oder Transparenz anwenden.
Auf cssmediaqueries findest du eine Auflistung vieler Queries. Du siehst auch gleich, welche für dein Ausgabemedium greifen würden, vergleiche die unterstützten Queries mal auf zwei verschiedenen Devices (Bsp. Desktop und Mobile): http://cssmediaqueries.com/overview.html
So kann für das Druckmedium ein eigenes CSS definiert werden, zum Beispiel:

body {
    background-color: blue;
    color:white;
  }
@media print {
  body {
   background-color: white;
   color:black;
  }
}

Breakpoints

«Breakpoints» sind Grenzen, an denen sich das Layout ändert. Meistens werden diese Grenzen in Abhängigkeit von der Device Breite definiert. Ihr seht in Mockups oft drei Devices; Desktop, Tablet hoch und Mobile. Die Breakpoints, die sich eingebürgert haben sind: – Desktop 13Zoll 1024pixel -> Angabe 64em – Tablet hoch 768pixel -> Angabe 48em – Mobiles unter 640Pixel -> 40em Wenn ihr im Chrome auf die Developer Tools umschaltet, könnt ihr einzelne voreingestellt Grössen anschauen oder eigene Grössen eingeben.



Breakpoints werden über Media Queries realisiert: innerhalb einer Media Query kann CSS definiert werden, das bloss dann gilt, wenn die Bedingungen der Query erfüllt sind. Ein Beispiel:

body {
    background-color: black;
  }
@media all and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Der background ist auf grossen Screens schwarz (erste Anweisung ohne Media Query). Auf einem kleinen Screen (bis zu einer Breite von 600px) ist der Background hellblau.
Auf cssmediaqueries findest du eine Auflistung vieler Queries. Du siehst auch gleich, welche für dein Ausgabemedium greifen würden, vergleiche die unterstützten Queries mal auf zwei verschiedenen Devices (Bsp. Desktop und Mobile): http://cssmediaqueries.com/overview.html

Wo soll man Breakpoints setzen/testen?
Als 'Daumenregel' könnt ihr diese Breakpoints berücksichtigen, sie entsprechen denen, die CSS Frameworks (z.Bsp. Tailwind) benutzen. Tailwind folgt der Devise mobile first, das bedeutet die default Stiles ohne Bedingung treffen für Mobiles zu. Schritt für Schritt werden über Media Queries Angaben gemacht, die für breitere Devices zutreffen.

Beispiel Mobile First

Grösse Width Query
default mobile CSS ohne media query
small mindestens 640px breit @media (min-width: 640px) { ... }
md mindestens 768px breit @media (min-width: 768px) { ... }
lg min. 1024px breit @media (min-width: 1024px) { ... }
xl min. 1280px breit @media (min-width: 1280px) { ... }
2xl min. 1536px breit @media (min-width: 1536px) { ... }

Beispiel Desktop First

Beim Desktop First Approach treffen die Stiles ohne media query auf Desktop zu und man arbeitet sich von den grossen zu den kleinen Bildschirmen vor. Wird ein Stile nicht überschrieben, so gelten die default Angaben.

Grösse Width Query
default desktop über 1024px CSS ohne media query
lg unter 1025px @media (max-width: 1024px) { }
md unter 769px @media (max-width: 768px) { }
sm unter 641px @media (max-width: 640px) { }

Beispiel

/*-Mobile First default mobile--*/
div.example {
        border:1px solid red;
}
    
/* If the screen size is 640px wide or more, use flexbox */
@media screen and (min-width: 640px) { 
    div.example {
        display: flex; 
        border:1px solid black;
        }
    }

Dasselbe Layout mit Desktop First:

/*-Desktop First --*/
div.example {
        display: flex; 
        border:1px solid black;
}
    
/* If the screen size is smaller than 640px display:block */
@media screen and (max-width: 640px) { 
    div.example {
        display: block; 
        border:1px solid red;
        }
    }

Media Queries können auch kombiniert werden:

@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Media Queries auf w3c: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Übung Menü bauen

Arbeitet euch durch dieses Tutorial:
https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/

Testing

Firefox und Chrome bieten in den Entwicklertools Device Testing an. Getestet werden fixe Grössen (Breakpoints) auf dem Browser selber. Unterschiede der Browser im Rendering der Schriften oder in der Interpretation von CSS werden hiermit nicht getestet.

Browserstack bietet

Responsive Images

(Kein Kerninhalt des Moduls)

Clone this wiki locally