Definitionen für die Benennung und Pixelgrößen
Die folgenden Benennungen und Pixelgrößen will ich hier mal festhalten die ich z.B. immer so nutze. Ich weiß, das es da auch andere Sichtweisen und Definitionen gibt. Aber auf eine muss man sich ja einigen.
| Name | Breakpoint | Seitenbreite | Rand (Gutter) | optimal Colums |
|---|---|---|---|---|
| Mobile Phone Portrait | bis 479px | 100% | 15px | 1 -2 |
| Mobile Phone Landscape / kleines Tablet | 480px bis 767px | 100% | 15px | 1 – 2 |
| Großes Tablet | 768px bis 992px | 750px | 15px | 3 – 4 |
| Computer | 992px bis 1200px | 970px | 15px | 3 – 4 |
| Large Screen | über 1200px | 1170px | 15px | 3 – 4 |
Übersicht der Breakpoints von verschiedenen CSS Frameworks
- Bootstrap 3 – 480px, 768px, 992px, 1200px – 5 Breakpoints, 12 Spalten
- Semantic UI – 480px, 768px, 992px, 1400px, 1920px – 6 Breakpoints , 16 Spalten
- UIkit – 480px, 768px, 960px, 1200px – 5 Breakpoints, 10 Spalten
- Eigene – 480px, 768px, 1024px, 1260px
Neue Ideen zu Breakpoints
Eigentlich gibt es keinen optimalen Breakpoint. Es muss einfach überall gut aussehen. Dazu gibt es in den folgenden Artikel einige Interessante Ansätze und Ideen.
- Neue Ideen zu Breakpoints im Responsive Web Design von die-netzialisten.de
- Device Agnostic Approach To Responsive Design,
- The Best Browser is the One You Have With You