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

10

¿Cómo style-m.cssy los style-l.cssarchivos se generan en Magento2?

En teoría, style-m.cssdebería tener menos código y tener estilos solo para dispositivos móviles que style-l.csspara cargar en dispositivos móviles más rápido.

¿Cómo define en menos archivo si parte del código debe ser parte de style-m.csso style-l.css?

Los siguientes enlaces y código fuente no me ayudaron a entenderlo.

Recursos:

magento2 layout css Aleksey Razbakov
fuente

Respuestas:

12

Estos archivos se generan a través de MENOS.

En teoría, style-m.css debería tener menos código y tener estilos solo para dispositivos móviles que style-l.css para cargar en dispositivos móviles más rápido.

Esto no es completamente correcto. El styles-m.csscontiene reglas CSS para ambos móvil y de escritorio y por lo tanto es generalmente más grande que el styles-l.cssque contiene normas para el escritorio. Sin embargo, el objetivo sigue siendo el mismo, de esta manera, los dispositivos móviles no necesitan descargar reglas CSS para dispositivos de escritorio.

Con respecto a la cuestión de cómo se pueden "colocar" los estilos en cualquiera de esos archivos, esto se hace a través de las consultas de medios de la biblioteca de Magento UI que ayudan a Magento a crear estos dos archivos a partir de sus MENOS reglas.

Para darle un ejemplo, un bloque de medios como el siguiente se colocaría styles-mya que tanto los dispositivos de escritorio como los dispositivos móviles tienen reglas dentro de este bloque "en común":

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

Un bloque de consulta de medios como este sería para dispositivos que tienen una resolución mínima de "screen_xs", que son dispositivos móviles con una resolución de pantalla de 480px y más grande, lo que significa que todavía se colocaría styles-mpero no necesariamente afectaría a todos los dispositivos móviles:

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

Cambiar el (@extremum = 'min')a (@extremum = 'max')cambiaría la regla a su opuesto y, por lo tanto, solo afectaría a los dispositivos con un ancho inferior a 480px.

Y un bloque como este solo afectaría a los dispositivos de escritorio y, por lo tanto, se colocaría styles-l, ya que todo 'arriba' screen__mse considera un dispositivo de escritorio (de forma predeterminada):

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

Puede leer más sobre estos puntos de quiebre en la guía para desarrolladores de Magento .

TiEul
fuente
¿Esto significa que no se nos permite anular styles-l.cssy styles-m.cssen nuestro tema?
Negro
4

De acuerdo con el default_head_blocks.xmldiseño del tema en blanco:

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

Por lo que entiendo, styles-l.csssolo se aplica para pantallas grandes (más de 768 px) y styles-m.cssse aplica todo el tiempo.

Esa es la razón por la que styles-m.csstiene más código porque contiene el código móvil y el código que se aplica independientemente del ancho de la pantalla. styles-l.csssolo contiene el código para pantallas más grandes.

Raphael en Digital Pianism
fuente
1
"styles-m.css tiene más código porque" no es cierto, si utiliza el enfoque Mobile-First
Aleksey Razbakov
2

Lo define con sus funciones de consulta de medios y menos funciones de protección. Por ejemplo, & when (@media-common = true) { ... }vaya a styles-m.css porque esos estilos deberían estar disponibles en todas partes.

Hablando de consultas de medios, esto va al archivo de escritorio:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Es posible que desee consultar mis Diapositivas sobre cómo lidiar con los estilos aquí:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

Tobias Hartmann
fuente