Idiomas: [🇺🇸] English - [🇪🇸] Español

Lo quieras o no, el desarrollo web moderno está directamente relacionado al diseño responsivo (responsive design).

Tenemos media queries en todos lados inclusive Bootstrap y Tailwind tienen un sistema de rejillas para poder adaptar con mayor facilidad el contenido según la pantalla o dispositivo.

Visor de Media Query

Algunas veces pensamos que los Media Query son difíciles de probar, pero las Herramientas de Desarrollo (DevTools) de Chrome/Edge tiene escondida una gema para lidiar y probar fácilmente esos puntos de inflexión (breakpoints).

Para activar ese superpoder debemos realizar los siguientes pasos.

1. Abrir las Herramientas de Desarrollo (DevTools) de Chrome/Edge
2. Activar la vista Mobile
3. Asegurarse de seleccionar "Responsive" en la lista de dispositivos.
4. Mostrar media queries (show media queries)

Barras de Consulta (Query Bars)

Dependiendo de la cantidad de media queries definidos en los estilos de la página vas a poder ver 4 barras de diferentes colores.

Tamaño preestablecido (Gris):

Ancho máximo (Azul):

Ancho máximo y mínimo (Verde):

Ancho mínimo (Naranja)

Ejemplo

La página de Bootstrap nos da una excelente oportunidad para ver esta utilidad en acción porque tiene definidos múltiples tipos de de media queries.

Código Fuente

Además también puedes sobre el media query seleccionado hacer click con el botón secundario y ver el código fuente.

Extra

Si también quieres ver todos los media query en acción al mismo tiempo te recomiendo darle una mirada a Responsively.

Es un increíble proyecto código abierto (open source) que nos puede hacer el trabajo más fácil en el desarrollo.

That’s All Folks!
Happy Coding 🖖