El diseño responsive nos enseña que nuestras páginas web pueden adaptarse a los dispositivos desde los que se visualizan para crear una mejor experiencia de usuario. Los media queries en CSS son esenciales para hacer que tu página web se modifique en función del tipo de dispositivo. Por ello, en este post te enseñamos qué son los media queries en CSS y cómo utilizarlos para crear una página web que sea flexible y se adapte a la experiencia de usuario.
¿Qué son los media queries en CSS?
Un media query o, en español, consulta de medios no es más que una consulta del estado de la máquina. Esta consulta puede cuestionar cosas que sabemos del navegador, sus tamaños y demás características de la máquina. Lo que hace un media query es determinar las características que deben estar presentes en la máquina para que se cumplan las reglas de CSS que tiene dentro. De este modo, si la máquina tiene características distintas a las establecidas, el media query no se cumple y, por ende, las reglas CSS no se aplican.
Te presentamos un ejemplo. Piensa que tienes una página web que has diseñado para dispositivos móviles siguiendo la metodología mobile-first del diseño responsive. Para este diseño, has determinado que la disposición de la página será de una sola columna, pues el ancho del dispositivo es muy pequeño. Sin embargo, quieres que, cuando el visitante vea la página web desde un dispositivo más ancho, la disposición sea de dos columnas. ¿Cómo puedes hacer esto?
Ya que tienes una regla establecida para crear una columna, puedes sobrescribir esta regla en ciertos casos usando el media query. Con el media query puedes establecer que, si el ancho de la pantalla es mayor al punto de ruptura, la disposición de los elementos se transforme a ser de dos columnas. El punto de ruptura es el valor en el que queremos que ocurra un cambio y es una decisión absolutamente personal.
En este caso, el punto de ruptura sería el ancho en el que sientas que un texto a dos columnas sería más cómodo que un texto de una sola columna. Aunque sabemos que los textos cortos en ancho son más fáciles de leer, no hay reglas sobre en qué punto deberíamos transformarlos. Por ello, te recomendamos hacer pruebas con tu equipo para determinar el punto de ruptura.
¿Cómo utilizamos los media queries en CSS?
Para insertar un media query en nuestro archivo CSS utilizamos la directiva media introducida por un arroba (@media). Después de esta directiva, determinamos el dispositivo en el que queramos que se aplique la regla usando las etiquetas de cada dispositivo. Así que podemos determinar que la regla sea para la pantalla (screen), la impresora (print), los sintetizadores de voz (speech) o incluso para todos los dispositivos (all). En la anterior versión de media queries existían otras etiquetas de dispositivos, pero se han desaprobado en la nueva actualización. Por ello, te recomendamos quedarte con estas etiquetas.
Los media queries en CSS también tienen un componente que llamamos «operadores lógicos». Estos son los que determinan qué combinación de características debe tener la máquina para que las reglas se apliquen. A continuación, te presentamos los dos operadores lógicos más comunes.
and
Este operador se utiliza para hacer que varias características del dispositivo sean necesarias para aplicar la regla. Es decir, cuando escribimos características como la orientación y el mínimo ancho separadas por el operador and, ambas tendrán que cumplirse para que se aplique la regla CSS. En nuestro ejemplo, podemos escribir que queremos que el mínimo ancho sea de 768px, pues sentimos que después de esto nos caben dos columnas en el ancho de la pantalla.También podemos decir que queremos que las dos columnas aparezcan solo cuando la pantalla es horizontal. Para hacer que ambas reglas se apliquen, escribimos lo siguiente:
@media all and (min-width: 768px) and (orientation: landscape)
Ten en cuenta que siempre que elijas un dispositivo en el que se cumplirá la regla, este cuenta como una característica requerida, por lo que la siguiente característica debe introducirse con and. Si no eliges un dispositivo, el media query se escribiría de la siguiente manera:
@media (min-width: 768px) and (orientation:landscape)
Lista separada por comas
¿Qué pasa cuando queremos que nuestra regla CSS se aplique cuando hay una característica o cuando hay otra? Al insertar una lista de características separada por comas en nuestro media query, le estamos diciendo al software que la presencia de cualquiera de estas características hará que la regla sea aplicable. Es decir que este operador funciona como un «or».
Para conocer más sobre los otros operadores lógicos que puedes insertar en un media query, te invitamos a leer el post de la Mozilla Developer Network sobre este tema.
¿Cómo seguir?
Ahora que sabes cómo utilizar los media queries en CSS, ¡es el momento de crear tu propia página web con diseño responsive! Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, en donde continuarás formándote sobre los lenguajes del desarrollo web. Con lo aprendido en el transcurso del curso, crearás y diseñarás tu propia web adaptable a la experiencia de usuario de la mano de nuestro profesores. ¡No te pierdas esta oportunidad de convertirte en un desarrollador web en pocos meses!
