Como probar media queries con Chrome

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…


This content originally appeared on DEV Community and was authored by Camilo Martinez

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 ?

Invitame un café en cafecito.app


This content originally appeared on DEV Community and was authored by Camilo Martinez


Print Share Comment Cite Upload Translate Updates
APA

Camilo Martinez | Sciencx (2021-08-02T21:42:48+00:00) Como probar media queries con Chrome. Retrieved from https://www.scien.cx/2021/08/02/como-probar-media-queries-con-chrome/

MLA
" » Como probar media queries con Chrome." Camilo Martinez | Sciencx - Monday August 2, 2021, https://www.scien.cx/2021/08/02/como-probar-media-queries-con-chrome/
HARVARD
Camilo Martinez | Sciencx Monday August 2, 2021 » Como probar media queries con Chrome., viewed ,<https://www.scien.cx/2021/08/02/como-probar-media-queries-con-chrome/>
VANCOUVER
Camilo Martinez | Sciencx - » Como probar media queries con Chrome. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/02/como-probar-media-queries-con-chrome/
CHICAGO
" » Como probar media queries con Chrome." Camilo Martinez | Sciencx - Accessed . https://www.scien.cx/2021/08/02/como-probar-media-queries-con-chrome/
IEEE
" » Como probar media queries con Chrome." Camilo Martinez | Sciencx [Online]. Available: https://www.scien.cx/2021/08/02/como-probar-media-queries-con-chrome/. [Accessed: ]
rf:citation
» Como probar media queries con Chrome | Camilo Martinez | Sciencx | https://www.scien.cx/2021/08/02/como-probar-media-queries-con-chrome/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.