Screens sizes and responsive
We use a mobile-first approach to support all screens sizes.
Major breakpoints
Major breakpoints are expressed in tee-shirt sizes letters, they are meant to provide an easy access to major devices types :
Please note that devices types cannot be detected through viewport widths, and those are just aproximations.
| viewport | token | corresponding devices types |
|---|---|---|
| 0px and up | screen.s | phones |
| 680px and up | screen.m | tablets and tiny labtops |
| 1024px and up | screen.l | landscape tablets, laptops |
| 1280px and up | screen.xl | laptops (depending on settings) |
| 1920px and up | screen.xxl | desktop |
Minor breakpoints
Each major breakpoint come with some minor ones, meant to give a more fine control over design for certain devices. You may never use them and you should avoid it whenever possible to keep things simple.
Minor breakpoints start with the name of a major one and use the following sizes declinaisons :
- medium
- large
- xlarge
Using a mobile first approach, a minor breakpoint is inevitabily bigger than the Major one :
| viewport | token | examples of devices |
|---|---|---|
| 320px and up | screen.s-medium | iphone5, SE |
| 360px and up | screen.s-large | Sony Xperia P, Samsung Galaxy S4, iphone6,7,8 |
| 390px and up | screen.s-xlarge | iphone6+,7+,X+, Samsung Galaxy Note |
| - | - | - |
| 680px and up | screen.m | Microsoft Surface Pro, Apple iPad mini, Samsung Galaxy Tab 7" |
| 769px and up | screen.m-medium | Samsung Nexus 10, Samsung Galaxy Tab 8.9" & 10" |
| - | - | - |
| 1024px and up | screen.l | Microsoft Surface Pro 3, Apple iPad Pro Ipad (landscape) |
| 1100px and up | screen.l-medium | landscape tablets, laptops |
| - | - | - |
| 1280px and up | screen.xl | laptops (depending on settings), Samsung Galaxy Tab 10" (landscape), Samsung Galaxy Tab 2 10" (landscape), |
| 1440px and up | screen.xl-medium | laptops (depending on settings), Microsoft Surface Pro 3 (landscape), Apple iPad Pro 12.9" (landscape) |
| 1680px and up | screen.xl-large | laptops (depending on settings) |
| - | - | - |
| 1920px and up | screen.xxl | desktop computers |