Las medias Queries son una extensión de la regla @media de CSS. Permite ajustar el diseño de una página web según el dispositivo en el que se muestre.
Las media queries juegan un papel fundamental en diseño web responsive o lo que es lo mismo, diseñar sitios web que se ven perfectamente en una gran variedad de dispositivos sin importar el tamaño.
Cómo usar una media query
Para poder usar las media queries basta con escribir en el CSS la directiva @media y seguido del ancho(mínimo, máximo o ambos). Según el ancho de la pantalla se activarán o no las reglas que estén dentro del @media.
Voy a mostrar un ejemplo con un div con el id «container» que tiene estas reglas de estilo
|
1 2 3 4 5 |
#container { width: 1000px; height:100px; background-color : #b3d4fc; } |
El resultado del div container a pantalla completa
Ahora si quiero que ese div reduzca su tamaño si el ancho de una pantalla es inferior a 500px añadiría la siguiente media query al CSS. A mayores le cambio el color para que el cambio sea más notable.
|
1 2 3 4 5 6 |
@media (max-width:495px) { #container { width: 200px; background-color : red; } } |
En esta ocasión max-width indica el limite de ancho del navegador pero podemos establecer a partir de que ancho se establezcan las reglas (min-width) o incluso un rango de tamaños por ejemplo
|
1 2 3 4 |
@media screen and (min-width: 320px) and (max-width: 480px) { /*Reglas*/ } |
Si queremos que sea en función de la pantalla del dispositivo, tendríamos que emplear min-device-width o max-device-width.
El div container en una ventana reducida
Si reduces el ancho de la ventana del navegador, verás que el div se ha reducido y cambiado de color. En las media query se sobrescriben las reglas respecto a las reglas originales. Por ejemplo, en esta práctica el div tiene un alto de 100px sin embargo en la media query no hemos especificado el alto y se ha mantenido.
También hay que tener en cuenta que se pueden emplear las media query para activar un css en particular. Si quisiéramos usar un CSS en caso de que la ventana tenga un ancho mínimo de 800px.
|
1 |
<link rel="stylesheet" media="(max-width: 800px)" href="ejemplo.css" /> |
Breakpoints comunes
Como he comentado antes, las media queries se emplean para adaptar la web al mayor número de dispositivos posibles. Por tanto, es bueno saber los «breakpoints» que son las medidas que establecemos para usar unas reglas u otras en función del tamalo. Hay unas medidas standard para adaptar una web a cada tipo de dispositivo. En css-tricks hay un resumen bastante bueno.
Aunque existan frameworks como Bootstrap o Foundation que facilitan mucho a la hora de hacer una web responsive, está bien tener en cuenta las media query para salir de algún aprieto puntual que los frameworks no nos pueden resolver.
Y hasta aquí las media query, espero que os sirva de ayuda. A seguir picando 🙂