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

10

Como style-m.csse style-l.cssarquivos são gerados no Magento2?

Em teoria, style-m.cssdeve ter menos código e ter estilos apenas para dispositivos móveis do que style-l.csspara carregar em dispositivos móveis mais rapidamente.

Como você define em menos arquivo se parte do código deve fazer parte style-m.cssou style-l.css?

Os links a seguir e o código fonte não me ajudaram a entender.

Recursos:

magento2 layout css

— Aleksey Razbakov
fonte

12

Esses arquivos são gerados através de MENOS.

Em teoria, o style-m.css deve ter menos código e ter estilos apenas para dispositivos móveis do que o style-l.css para carregar em dispositivos móveis mais rapidamente.

Isto não está completamente correto. Ele styles-m.csscontém regras CSS para dispositivos móveis e computadores e, portanto, geralmente é maior do que o styles-l.cssque contém regras para computadores. No entanto, o objetivo ainda é o mesmo, assim, os dispositivos móveis não precisam baixar regras de CSS para dispositivos de desktop.

Com relação à questão de como os estilos podem ser "colocados" em um desses arquivos, isso é feito através das consultas de mídia da biblioteca da interface do Magento, que ajudam o Magento a criar esses dois arquivos a partir das suas regras MENOS.

Para dar um exemplo, um bloco de mídia como o seguinte seria colocado, styles-mpois os computadores e os dispositivos móveis têm regras dentro desse bloco "em comum":

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

Um bloco de consulta de mídia como este seria para dispositivos com uma resolução mínima de "screen_xs", que são dispositivos móveis com uma resolução de tela de 480px e maior, o que significa que ainda seria colocado, styles-mmas não afetaria necessariamente todos os dispositivos móveis:

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

Mudar (@extremum = 'min')para (@extremum = 'max')mudaria a regra para o oposto e, portanto, afetaria apenas dispositivos com largura menor que 480 px.

E um bloco como esse só diz respeito a dispositivos de mesa e, portanto, é inserido styles-l, pois tudo 'acima' screen__mé considerado um dispositivo de mesa (por padrão):

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

Você pode ler mais sobre esses pontos de interrupção no guia do desenvolvedor do Magento .

— TiEul
fonte

Isso significa que não temos permissão para substituir styles-l.csse styles-m.cssem nosso tema?

— Preto

4

De acordo com o default_head_blocks.xmllayout do tema em branco:

<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>

Pelo que entendi, styles-l.cssé aplicado apenas para telas grandes (acima de 768px) e styles-m.cssé aplicado o tempo todo.

Portanto, esse é o motivo pelo qual styles-m.csstemos mais código, pois ele contém o código móvel e o código que se aplica independentemente da largura da tela. styles-l.csscontém apenas o código para telas maiores.

— Raphael na Digital Pianism
fonte

1

"styles-m.css tem mais código porque" não é verdadeiro, se você usar a abordagem Mobile-First

— Aleksey Razbakov

2

Você define isso com suas funções de consulta de mídia e menos funções de guarda. Por exemplo, & when (@media-common = true) { ... }vá para styles-m.css porque esses estilos devem estar disponíveis em qualquer lugar.

Falando sobre consultas de mídia, isso vai para o arquivo da área de trabalho:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Você pode conferir meus slides sobre como lidar com estilos aqui:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— Tobias Hartmann
fonte