What are the Magento responsive design CSS breakpoints ?

Breakpoints are used in the CSS code to set up the screen width at which the design switches from the mobile to the desktop version.

The Blank and Luma themes use Less variables to implement the following breakpoints:

  • @screen__xxs: 320px
  • @screen__xs: 480px
  • @screen__s: 640px
  • @screen__m: 768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)
  • @screen__l: 1024px
  • @screen__xl: 1440px