Solución:
Estos archivos se generan a través de LESS.
En teoría, style-m.css debería tener menos código y estilos solo para dispositivos móviles que style-l.css para cargarse en dispositivos móviles más rápido.
Esto no es del todo correcto. los styles-m.css contiene reglas CSS tanto para dispositivos móviles como para computadoras de escritorio y, por lo tanto, generalmente es más grande que el styles-l.css que contiene reglas para 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 la interfaz de usuario de Magento que ayudan a Magento a crear estos dos archivos a partir de sus reglas LESS.
Para darle un ejemplo, un bloque de medios como el siguiente se colocaría en styles-m ya que tanto las computadoras 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 o más, lo que significa que aún se colocaría en styles-m pero no afectaría necesariamente a todos los dispositivos móviles:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
h1 {
font-size: 18px;
}
}
Cambiando el (@extremum = 'min') para (@extremum = 'max') cambiaría la regla a su opuesta 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 en styles-l, como todo ‘arriba’ screen__m se considera un dispositivo de escritorio (por defecto):
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
h1 {
font-size: 24px;
}
}
Puede leer más sobre estos puntos de ruptura en la guía para desarrolladores de Magento.
De acuerdo con la default_head_blocks.xml en el diseño de 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="https://foroayuda.es/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.css solo se aplica para pantallas grandes (por encima de 768 px) y styles-m.css se aplica todo el tiempo.
Entonces esa es la razón por la que styles-m.css tiene más código porque contiene el código móvil así como el código que se aplica sea cual sea el ancho de la pantalla. styles-l.css solo contiene el código para pantallas más grandes.
Usted define eso con sus funciones de consulta de medios y menos funciones de guardia. 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