Magento 2: style-m.css vs style-l.css

10

Comment style-m.csset les style-l.cssfichiers sont générés dans Magento2?

En théorie, il style-m.cssdevrait y avoir moins de code et avoir des styles uniquement pour les appareils mobiles style-l.cssafin de charger plus rapidement sur les appareils mobiles.

Comment définir dans moins de fichier si une partie du code doit faire partie de style-m.cssou style-l.css?

Les liens et le code source suivants ne m'ont pas aidé à le comprendre.

Ressources:

magento2 layout css Aleksey Razbakov
la source

Réponses:

12

Ces fichiers sont générés via LESS.

En théorie, style-m.css devrait avoir moins de code et avoir des styles uniquement pour les appareils mobiles que style-l.css afin de se charger plus rapidement sur les appareils mobiles.

Ce n'est pas tout à fait correct. Le styles-m.csscontient des règles CSS pour mobile et ordinateur de bureau et est donc généralement plus grand que celui styles-l.cssqui contient des règles pour ordinateur de bureau. Cependant, l'objectif est toujours le même, de cette façon, les appareils mobiles n'ont pas besoin de télécharger les règles CSS pour les appareils de bureau.

En ce qui concerne la question de savoir comment les styles peuvent être "placés" dans l'un de ces fichiers, cela se fait via les requêtes multimédias de la bibliothèque de l'interface utilisateur Magento qui aident Magento à créer ces deux fichiers à partir de vos règles MOINS.

Pour vous donner un exemple, un bloc multimédia comme le suivant serait placé styles-mcar les appareils de bureau et mobiles ont des règles dans ce bloc "en commun":

& when (@media-common = true) {
  h1 {
    font-size: 12px;
  } 
}

Un bloc de requête multimédia comme celui-ci serait pour les appareils qui ont une résolution minimale de "screen_xs", qui sont des appareils mobiles avec une résolution d'écran de 480 pixels et plus, ce qui signifie qu'il serait toujours placé styles-mmais n'affecterait pas nécessairement tous les appareils mobiles:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
  h1 {
    font-size: 18px;
  }  
}

Changer le (@extremum = 'min')pour (@extremum = 'max')changerait la règle à son opposé et n'affecterait donc que les appareils d'une largeur inférieure à 480 px.

Et un bloc comme celui-ci ne concernerait que les appareils de bureau et serait donc placé dedans styles-l, car tout ce qui précède screen__mest considéré comme un appareil de bureau (par défaut):

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  h1 {
    font-size: 24px;
  }  
}

Vous pouvez en savoir plus sur ces points d'arrêt dans le guide du développeur Magento .

TiEul
la source
Est-ce à dire que nous ne sommes pas autorisés à passer outre styles-l.csset styles-m.cssdans notre thème?
noir
4

Selon la default_head_blocks.xmldisposition du thème vierge:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
    </head>
</page>

D'après ce que je comprends, styles-l.cssn'est appliqué que pour les grands écrans (au-dessus de 768 px) et styles-m.cssest appliqué tout le temps.

C'est donc la raison pour laquelle il y styles-m.cssa plus de code car il contient le code mobile ainsi que le code qui s'applique quelle que soit la largeur de l'écran. styles-l.csscontient uniquement le code pour les écrans plus grands.

Raphael chez Digital Pianism
la source
1
"styles-m.css ont plus de code car" n'est pas vrai, si vous utilisez l'approche Mobile-First
Aleksey Razbakov
2

Vous définissez cela avec vos fonctions de requête multimédia et moins de fonctions de garde. Par exemple, & when (@media-common = true) { ... }accédez à styles-m.css car ces styles doivent être disponibles partout.

En parlant de requêtes multimédias, cela va au fichier de bureau:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Vous voudrez peut-être consulter mes diapositives sur la façon de gérer les styles ici:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

Tobias Hartmann
la source