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.

viewporttokencorresponding devices types
0px and upscreen.sphones
680px and upscreen.mtablets and tiny labtops
1024px and upscreen.llandscape tablets, laptops
1280px and upscreen.xllaptops (depending on settings)
1920px and upscreen.xxldesktop

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 :

viewporttokenexamples of devices
320px and upscreen.s-mediumiphone5, SE
360px and upscreen.s-largeSony Xperia P,
Samsung Galaxy S4,
390px and upscreen.s-xlargeiphone6+,7+,X+,
Samsung Galaxy Note
680px and upscreen.mMicrosoft Surface Pro,
Apple iPad mini,
Samsung Galaxy Tab 7"
769px and upscreen.m-mediumSamsung Nexus 10,
Samsung Galaxy Tab 8.9" & 10"
1024px and upscreen.lMicrosoft Surface Pro 3,
Apple iPad Pro
Ipad (landscape)
1100px and upscreen.l-mediumlandscape tablets, laptops
1280px and upscreen.xllaptops (depending on settings),
Samsung Galaxy Tab 10" (landscape),
Samsung Galaxy Tab 2 10" (landscape),
1440px and upscreen.xl-mediumlaptops (depending on settings),
Microsoft Surface Pro 3 (landscape),
Apple iPad Pro 12.9" (landscape)
1680px and upscreen.xl-largelaptops (depending on settings)
1920px and upscreen.xxldesktop computers