En nuestro dia a dia, en CSS, estamos más que acostumbrados a usar media queries para definir estilos de nuestro sitio web para distintas pantallas, ya sea para dispositivos móviles, Tablets, etc…

Lo que solemos usar es, aproximadamente, lo siguiente:

@media (min-width: 1281px) {
  //CSS  
}

Sin embargo, en Magento 2 tenemos otros mecanismos y reglas para usar media queries, establecidos en Magento UI Library.

A la hora de establecer las media queries vamos a tener en cuenta varios elementos importantes:

• .media-width() - es el mixin que usaremos para agrupar reglas de estilo.
• @extemum - es una variable que nos indicará si usaremos el min-width o el max-width. El valor de esta variable puede ser min o max.
• @break - es la variable que indicará el breakpoint a comparar con la condición de la media query.

Ejemplo:

// Código LESS
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    your styles
}

// Código CSS al que será compilado
@media only screen and (max-width: 640px) {
    your styles
}

Es importante el uso de media queries, para evitar que un mismo estilo se llame múltiples veces para distintos tipos de pantalla.

Generalmente tenemos dos ficheros en los que se “mezclarán” todos nuestros estilos:

• styles-l.less - estilos para escritorio (tamaño de pantalla 768px o superior)
• styles-m.less - estilos para móviles y resto

Con esto, Magento solo cargará uno de los dos estilos dependiendo del tamaño de la pantalla, reduciendo el tiempo de carga.

Para esta separación de estilos se usará tanto @media-common como @media-target. Cuando usamos @media-common es para indicar si queremos generar los estilos comunes o no. Es decir, para cualquier tipo de dispositivo, los estilos serán comunes. Por el contrario, al utilizar @media-target deberemos indicar para qué dispositivo servirán estos estilos. Los valores de @media-target pueden ser all, desktop o mobile.

Resumen

Aquí dejo un pequeño resumen de las media queries más utilizadas en nuestros proyectos de Magento 2.

 
 // Comun (para estilos usados tanto en móvil como en escritorio)
 & when (@media-common = true) {
    ...
 }
 
 // Escritorio
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    ...
 }
  
 // Móvil
 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    ...
 }
  
 // Tablet
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    ...
 }