19th Ave New York, NY 95822, USA
+1 916-875-2235
+1 916-875-2235

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:

 

Ahora, con las media queries las opciones aumentan. Un ejemplo de media queries sería el siguiente:

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

Afecta a la vista de pantalla.

 

Ejemplo #2

Afecta a la vista de impresión.

 

Ejemplo #3

Afecta a la vista de televisión.

 

Ejemplo #4

Afecta a la vista de pantalla de un máximo de 990px.

 

Ejemplo #5

Afecta a la vista de pantalla de un mínimo de 560px.

 

Ejemplo #6

Afecta a la vista de impresión en color.

 

Ejemplo #7

Afecta a la vista de pantalla de un dispositivo en horizontal .

 

Ejemplo #8

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:

https://developer.mozilla.org/es/docs/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Related Posts