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.css
contiene reglas CSS para ambos móvil y de escritorio y por lo tanto es generalmente más grande que el styles-l.css
que 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-m
ya 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-m
pero 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__m
se 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 .
styles-l.css
ystyles-m.css
en nuestro tema?