Otra de las grandes ventajas del CSS3 para dispositivos móviles ha sido la posibilidad de modificar los estilos dependiendo de la resolución que estén usando. Y podemos hacerlo gracias a la funcionalidad Media Query.
Los Media Query consisten en instrucciones CSS3, que contienen una o más expresiones, orientadas a un dispositivo que cumple unas ciertas normas. El resultado será visible siempre que se cumplan esos requisitos específicos. De esta forma, sobreescribiremos todas las demás instrucciones antes declaradas. Puede tener las siguientes estructuras:
Cuando la norma se cumple, se ejecuta la nueva instrucción. En el ejemplo anterior, cualquier dispositivo con un tamaño de navegador inferior a 800px ejecutaría ambas llamadas. Es importante tener en cuenta lo mencionado: con un tamaño de navegador. Esto significa que podemos programar una Web desde un PC de sobremesa, y si ajustamos la ventana del navegador, veremos como cambian los CSS gracias a los Media Query.
Por la Red podréis encontrar múltiples ejemplos sobre los Media Query. Es importante saber que no se pueden especificar para un solo dispositivo, por ejemplo un iPad. Pero si que se puede hacer referencia a sus proporciones, para que sea seguro que a éste le afecten. Aunque esos Media Query cambiarán sobre cualquier dispositivo con la misma resolución.
Lo más importante que hay que saber sobre los Media Queries, y la conclusión de este artículo, es son los que hacen posible que una Web sea «Responsive». Es decir, que se adapte a los diferentes tamaños de pantalla sin necesidad de reprogramar toda la Web.
Aquí dejo algunos ejemplos de Media Query para iPads y iPhones. Aunque como he comentado, afectarán a cualquier tablet o móvil con la misma resolución de pantalla:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* Aquí van los estilos */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* Aquí van los estilos */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* Aquí van los estilos */}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* Aquí van los estilos */}
Documentación sobre Media Query | Más ejemplos
