DEV Community

loading...
Cover image for Como probar media queries con Chrome
equimancho

Como probar media queries con Chrome

Camilo Martinez
['Family Man', 'Engineer', 'Software Developer', 'Metalhead', 'English Student' ]
Updated on ・2 min read

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 grillas 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 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
  2. Activar la vista Mobile
  3. Asegurarse de seleccionar "Responsive" en la lista de dispositivos.
  4. Mostrar media queries (show media queries)

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):
preset

Ancho máximo (Azul):
Alt Text

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

Ancho mínimo (Naranja)
Alt Text

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.

example

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.

source

Extra

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

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 🖖

Invítame a un café

Discussion (0)