Dentro de mi trabajo actual me ha tocado realizar un rediseño de varias pantallas y principalmente mejorar la vista en dispositivos móviles, para esto muchos desarrolladores frontend estamos relacionamos con las media queries.
Las media queries en desarrollo web y en magento pueden manejarse de la forma «típica» ya sea aplicando la condición desde la etiqueta link o con la instrucción @media que nos ofrece CSS.
Así que en esta entrada lo que haré es mostrar ejemplos de como Magento en su versión 2 aplica esta funcionalidad en el desarrollo de temas que vienen establecidos en Magento UI Library.
Podemos visualizar la documentación completa aquí, pero intentaré con unos ejemplos resumir en espańol la funcionalidad de estos.
Breakpoints en Magento 2
Los breakpoints se utilizan en CSS para configurar el ancho de pantalla en el que el diseño cambia de la versión móvil a la de escritorio.
En Magento 2 los temas Blank y Luma usan variables en less para implementar los siguientes puntos breakpoints:
@screen__xxs: 320px@screen__xs: 480px@screen__s: 640px@screen__m: 768px (en los temas Blank y Luma, este punto de interrupción cambia entre las vistas móvil y de escritorio)@screen__l: 1024px@screen__xl: 1440px
Aunque no es recomendable, podemos cambiar estos breakpoints en un proyecto de Magento desde el archivo: lib/web/css/source/lib/variables/_responsive.less.
Al visualizar estas propiedades tenemos que tener claro lo que significa cada una:
- .media-width(): Es un mixin que usaremos para agrupar reglas de estilo.
- @extemum: Es una variable que nos indicará si aplicaremos el min-width o el max-width, así que el valor de esta puede ser min o max.
- @break: Es la variable que compara el breakpoint con la condición de la media query.
- @media-common: Indicamos si queremos generar los estilos comunes o no. Por ejemplo decir que para todos los dispositivos los estilos serán comunes o no.
- @media-target: Al contrario de @media-common aquí indicamos para qué dispositivos serán nuestros estilos, sus valores pueden ser all, desktop o mobile.
A continuación dejo un ejemplo de las media queries más utilizadas en magento 2:
¿En que me ayuda separar mis estilos por dispositivo?
Por defecto en los navegadores, las consultas de medios generan estilos en dos archivos diferentes:
- estilos-m.less: Genera estilos básicos y específicos para dispositivos móviles.
- estilos-l-less: Genera estilos específicos de escritorio (para pantalla de 768 px de ancho y superior).
Esto significa que cuando el sitio se abre desde un dispositivo móvil solo carga el archivo estilos-m.less y pasara lo contrario si abrimos el sitio desde un desktop o un dispositivo con más tamaño de pantalla.
Y justo, para esta separación de archivos es que nos ayudan @media-target y @media-common.