Wie man erstellt: Breakpoints typischer Geräte

Lernen Sie, wie Sie Medienabfragen für typische Gerät-Breakpoints verwenden.

Typische Gerät-Breakpoints

Es gibt viele Bildschirme und Geräte mit verschiedenen Höhen und Breiten, daher ist es schwierig, genaue Breakpoints für jedes Gerät zu erstellen.

Um die Bedienung zu vereinfachen, können Sie sich auf fünf häufige Kategorien beziehen:

Beispiel

/* Überkleine Geräte (Handys, 600px und weniger) */
@media only screen and (max-width: 600px) {...}
/* Kleine Geräte (Längsformat-Tablets und große Handys, 600px und mehr) */
@media only screen and (min-width: 600px) {...}
/* Mittlere Geräte (Querformat-Tablets, 768px und mehr) */
@media only screen and (min-width: 768px) {...}
/* Große Geräte (Laptops/Desktop-Computer, 992px und mehr) */
@media only screen and (min-width: 992px) {...}
/* Übergröße-Geräte (große Laptop- und Desktop-Computer, 1200px und mehr) */
@media only screen and (min-width: 1200px) {...}

Selbst ausprobieren

Verwandte Seiten

Tutorium:CSS 媒体查询

Tutorium:CSS Medienabfrage-Beispiel

Referenzhandbuch:CSS @media 规则

Tutorium:Responsive Web-Design durch Medienabfragen umsetzen

Referenzhandbuch:JavaScript-Funktion window.matchMedia()