En este tutorial hablaremos sobre los media queries, cómo funcionan y cómo usarlos correctamente.

Cuando empecemos a desarrollar un proyecto web, debemos pensar no solo en cómo se verá en computadores de escritorio, sino también en dispositivos móviles. Las distintas gamas de  resoluciones, orientación de pantalla, entre otros puntos, no solo nos dejan dolores de cabeza y pocas horas de sueño, sino que representan un reto al momento de desarrollar un proyecto web. Así como no podemos evitar la resaca después de una noche de fiesta, el responsive design tampoco puede pasar desapercibido y tampoco debería, pues nos permite mejorar la experiencia de usuario gracias a que se adapta al dispositivo con el que se accede, reordenando sus elementos, secciones y demás características para mostrar el contenido de mejor manera.

No estamos diciendo que tendremos una versión de la web para las distintas resoluciones de los dispositivos (móviles y escritorio); por el contrario, con nuestra misma estructura de  HTML y CSS, nuestra web se adaptará en función del dispositivo en el que se muestre.

Aquí es donde aparecen los media queries para salvar el día.

¿Qué son los media queries y cómo funcionan? Estamos a punto de descubrirlo en este tutorial: Los media queries forman parte de la especificación de CSS3 y son un tipo de consulta que condiciona a nuestra hoja de estilos a aplicar propiedades dependiendo de las características del medio donde se muestre y esta es una excelente forma de entregar una mejor experiencia de usuario.

Para usar un media query adecuadamente, podemos hacerlo de dos maneras

Linkeando a un archivo externo en nuestro HTML.

o dentro de nuestro HTML dentro de las etiquetas