Media queries de CSS3
Los media queries de CSS3 son una forma de adaptar nuestros diseños web a los distintos dispositivos. Se utilizan en el resposive web design, y son una gran opción para mejorar la experiencia del usuario. No es lo mismo ver una página web en un navegador de escritorio que verla en un navegador de un smartphone o tablet.
Introducción
Existen otras opciones como tener dos o más webs creadas y cargar una u otra dependiendo de cual sea el dispositivo que se use, pero esto no es para nada óptimo.
Antes se podía distinguir entre el css que se debía utilizar para mostrar en pantalla y el que se utilizaba para imprimir:
@media screen { h1{ color:orange; } } @media print { h1{ color:black; } }
Ahora, con las media queries las opciones aumentan. Un ejemplo de media queries sería el siguiente:
.contenido{ width:990px; } @media screen and (max-width:990px) { .contenido{ width:100%; } }
Imaginemos que tenemos un div con la clase contenido. En el código anterior definimos que como norma general el ancho va a ser de 900px, pero después, comprobamos que si se cumple que el dispositivo es una pantalla y que el tamaño es inferior a 990px, el ancho del div contenido será del 100%.
Cómo utilizar las media queries
Ejemplo #1
@media screen { /*Nuestro código*/ }
Afecta a la vista de pantalla.
Ejemplo #2
@media print{ /*Nuestro código*/ }
Afecta a la vista de impresión.
Ejemplo #3
@media tv{ /*Nuestro código*/ }
Afecta a la vista de televisión.
Ejemplo #4
@media screen and (max-width:990px){ /*Nuestro código*/ }
Afecta a la vista de pantalla de un máximo de 990px.
Ejemplo #5
@media screen and (min-width:560px){ /*Nuestro código*/ }
Afecta a la vista de pantalla de un mínimo de 560px.
Ejemplo #6
@media print and (color){ /*Nuestro código*/ }
Afecta a la vista de impresión en color.
Ejemplo #7
@media screen and (orientation:landscape){ /*Nuestro código*/ }
Afecta a la vista de pantalla de un dispositivo en horizontal .
Ejemplo #8
@media screen and (orientation:portrait){ /*Nuestro código*/ }
Afecta a la vista de pantalla de un dispositivo en vertical.
Compatibilidad con navegadores
Navegador |
GOOGLE CHROME |
INTERNET EXPLORER |
MOZILLA FIREFOX |
SAFARI |
OPERA |
Desde esta versión aceptan @media |
21 | 9 | 3.5 | 4.0 | 9 |
Fuentes: