Cómo usar las Media Queries en diseño web responsive
Tal y como ya hemos visto, una Media Query Responsive de CSS3 mejoran la visualización a la hora de crear tu web. En esta ocasión abordamos el tema desde un punto de vista más práctico e incluimos algunos ejemplos que podemos implementar en el código y facilitarán que nuestros diseños web se adapten a cualquier medio y pantalla, algo imprescindible en el desarrollo web hoy en día.
Configurar el Viewport de forma correcta
Como vimos hace un tiempo, Viewport es la etiqueta que más representa a la web móvil y que sirve para decirle al navegador cómo debe interpretar la página en estos dispositivos. A través de su etiqueta META podremos especificar si el usuario podrá hacer zoom cuando esté en ésta, definir unos valores iniciales al entrar en ella o fijar la anchura que debe simular en la pantalla.
Un fallo habitual, si no tienes definido un Viewport, es que la Media Query Responsive no están funcionando, si es así, revisa esto para resolver el problema.
Cómo colocar en el orden adecuado los Media Queries
Tendrás que tener en cuenta un par de cosas para que el Orden de las Media Queries sea el correcto:
- La cascada que, a nivel de CSS, atañe completamente a las reglas de estilo.
- Aplicar la regla que llamamos Mobile First.
Como aclaración, comentaros que la cascada en CSS es la forma de procesar los estilos para que se puedan sobrescribir. Es decir, el último valor que tiene en cuenta es el último que se definió.
Por lo que el orden que se usa habitualmente para las Media Queries queda así:
- Los estilos sin Media Queries serán globales y estos afectarán a todos los dispositivos.
- Lo siguiente es colocar en cabeza las Media Queries con la siguiente anchura de pantalla que necesites.
- Por último, colocaremos las Media Queries para situar en orden creciente el resto de anchura de pantallas. Es decir, se finaliza con las Media Queries con la anchura mayor de pantalla.
Aplicando rangos de Media Query Responsive
Se podrían establecer diferentes rangos en las Media Queries usando min-width y max-width al mismo tiempo. Anque no es algo usual, podrías necesitarlo en alguna ocasión.
@media (min-width: 750px) and (max-width: 820px){
.lateral{
width: 33%;
background-color: #6fe;
}
}
Si se cumplen ambas condiciones la anchura mínima será de 750 píxeles y la máxima de 820 píxeles.
Anchura de la pantalla del dispositivo
Para conseguir con las Media Queries una definición para la anchura total de la pantalla, utilizaremos max-device-width y min-device-width, que no afectan a la anchura de la pantalla actual, sino a la del dispositivo.
Aunque hemos hablado de Media Queries globales, estas no existen como tal, pero nos daremos cuenta que si no existe ninguna definida en tus CSS, las reglas de estilo estarán siendo aplicadas globalmente. Es decir, que si no las defines, estás aplicando CSS que afectan a todos los estados de pantallas y dispositivos, y esto es, evidentemente, una declaración global.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.