CSS in responsive design
What's in this topic
Stylesheets are the main tool in responsive web design (RWD) implementation. This topic describes the mechanisms and approaches to building RWD used in the default Magento themes. To re-use them in your custom theme, make your theme inherit from the Magento basic Blank theme.
Media queries in Magento default themes
The Blank and Luma theme styles are based on the Magento UI library. The library uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the screen width.
According to the approach implemented in the library, the .media-width() mixin can be used in any .less file in your theme, as many times as you need, but it is invoked only once, in lib/web/css/source/lib/_responsive.less. The resulting styles.css has only one call of each media query with all the rules there, instead of multiple calls for the same query.
You can find more information about the Magento UI library responsive mixin usage in <your_Magento_instance>/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html (view in a browser).
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 implement the following breakpoints:
- 320px
- 480px
- 640px
- 768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)
- 1024px
- 1440px
You can change these breakpoints and add new ones in your custom theme. For instructions see the Add a new breakpoint topic.
Mobile first
In the Blank and Luma themes, the mobile first approach is used. It means that the styles for mobile devices (screen width less than 768px) are extended by the styles for the higher breakpoints. As the result, the extra styles are never loaded when a store is viewed on a mobile device.
In the Blank theme, the mobile and desktop styles are defined in separate files:
- styles-l.less is used to generate desktop-specific styles (768px and higher).
- styles-m.less is used to generate basic and mobile-specific styles.