13/02/2016
Responsiville breakpoints
Default Responsiville breakpoints are (in pixels):
| breakpoint | from | up-to | real-screens | comments |
| small | 0 | 320 | 320 | still quite some mobile devices here |
| mobile | 321 | 599 | 360
480 |
360px is the most common mobile device width nowadays, some 480px devices exist, but at 600px tablet sizes begin |
| tablet | 600 | 1023 | 600
768 800 |
common device sizes are 600px, 768px is for iPad portrait, some 800px devices do exist, we do not include the 1024px iPad landscape here, so that we can style it separately |
| laptop | 1024 | 1279 | 1024 | some small, old laptops, but mainly the iPad landscape, desktop wide sizes practiacally begin here |
| desktop | 1280 | 1439 | 1280
1366 |
actual desktop and laptop screens start here, older Macbook Pro, etc, this is where we mostly target nowadays for desktop |
| large | 1440 | 1679 | 1440 | large desktop screens, older Macbook Pro |
| xlarge | 1680 | ∞ | 1680
1920 |
mostly Macbook Pro at 1680px, very large desktop screens, usually at 1920px, also iMac and Dell at 2560px |
Remember: breakpoints are not real device widths, they are the points where one's layout shifts to adapt to a new potential device width. For instance between 0 and 320px the most common device width is 320px. Also, between 321px and 600px the most common device width is 360px. You usually care mostly from the mobile up to the laptop breakpoints and the rest will adapt easily, as they refer to desktop screen sizes.
Based on mydevice.io and screensiz.es.