Create a responsive mobile theme
The topic describes how to create a responsive mobile-specific theme using the default approaches.
To use all the responsive approaches implemented in the out-of-the-box Blank and Luma themes, your theme should declare one of them as a parent.
To create a mobile-specific theme:
- Create a theme as described in Create a theme, having specified Blank or Luma as a parent theme.
- Add a
<theme_dir>/Magento_Theme/layout/default_head_blocks.xmllayout file with the following content:
Copied to your clipboard<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"><head><remove src="css/styles-l.css" /></head></page>
The <remove> instruction removes the desktop-specific files from your theme.
Apply mobile-specific styles
Use styles-m.less to generate mobile-specific styles.
Copied to your clipboard<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"><head><remove src="css/styles-l.css" /><css src="css/styles-m.css" /></head></page>
Media queries @media-common, max screen__m, max screen__s, max @screen__xs and max @screen__xxs will be added to styles-m.css.
Example of a LESS mixin to target screen width less than 480px:
Copied to your clipboard.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {// your code}
Example of a LESS mixin to target screen width less than 768px:
Copied to your clipboard.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {// your code}
