Gewusst wie: Typische Geräte-Haltepunkte
Erfahren Sie, wie Sie Medienabfragen für allgemeine Gerätehaltepunkte verwenden.
Typische Geräte-Haltepunkte
Es gibt unzählige Bildschirme und Geräte mit unterschiedlichen Höhen und Breiten, daher ist es schwierig, einen genauen Haltepunkt für jedes Gerät zu erstellen. Um die Dinge einfach zu halten, könnten Sie auf fünf gemeinsame Gruppen abzielen:
Beispiel
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Verwandte Seiten
CSS-Tutorial: CSS-Medienabfragen
CSS-Tutorial: Beispiele für CSS-Medienabfragen
CSS-Referenz: Die @media-Regel
RWD-Tutorial: Responsives Webdesign mit Medienabfragen
JavaScript-Tutorial: Die Methode window.matchMedia()