Uso de media queries CSS3 para diseño web móvil
Si eres diseñador web seguro que ya sabes que desde hace tiempo puedes disfrutar del módulo media queries CSS3 para crear páginas web multidispositivo y diseño web para móviles.
Con el uso de media queries en CSS3 puedes adaptar a la perfección un diseño web a cualquier tipo de pantalla. Esto significa que puedes hacer el diseño de tus páginas web para pantallas gigantes, para pantallas de ordenadores portátiles y tablets y, como no, para las más pequeñas incluidas en teléfonos móviles.
Por ejemplo, podemos indicar mediante nuestro código CSS cómo se comportará la visualización de nuestra web según el ancho de pantalla del dispositivo del usuario que nos visita:
- @media only screen and (max-width:300px){}
- @media only screen and (max-width:800px){}
Esto es una herramienta potentísima que cualquier diseñador web puede usar al crear un diseño de página multidispositivo con infinidad de ventajas.
- Nos permite adaptar el contenido al dispositivo del usuario.
- Buena visualización en tablets y móviles.
- Diseño adaptavito para pantallas de portátiles pequeñas.
- Visualización del sitio de cliente tanto para pantallas grandes como pequeñas.
- Crear un diseño web y adaptar todo el contenido mediante hojas de estilo CSS según sea necesario.
Además, si al uso de media queries añadimos porcentajes en nuestras hojas de estilo… el resultado puede ser algo verdaderamente potente. Por ejemplo:
- @media only screen and (max-width:300px){
- .container{ margin: 0px auto; max-width: 300px; }
- }
- Y cambiarlo por:
- @media only screen and (max-width:300px){
- /*Aquí le indicamos un porcentaje para el ancho en lugar de indicar pixeles fijos.*/
- .container{ margin: 0px auto; max-width: 100%; }
- }
Y si montamos un ejemplo completo sería algo así en donde indicamos al navegador que muestre una fuente Verdana, con tamaño de 14 píxeles en pantalla (screen), y letra negrita. Pero si la página se imprime, será en un tipo de letra Times 10 píxeles. Una forma rápida y sencilla de diferenciar si estamos visualizando el contenido o imprimiéndolo.
- @media screen{
- p.test{font-family:verdana,sans-serif;font-size:14px;}
- }
- @media print{
- p.test {font-family:times,serif;font-size:10px;}
- }
- @media screen, print{
- p.test {font-weight:bold;}
- }
Diferentes media type que se pueden declarar en CSS3
| Media Type | Description |
|---|---|
| all | Uso para todos los dispositivos |
| aural | Voz y sintetizadores de sonido |
| braille | Dispositivos braille |
| embossed | Impresión braille |
| handheld | Dispositivos pequeños o de mano |
| Impresión | |
| projection | Presentaciones, diapositivas, etc. |
| screen | Pantallas de ordenador, móvil, tablets. |
| tty | Se utiliza para los medios de comunicación mediante una cuadrícula de caracteres de ancho fijo, como teletipos y terminales |
| tv | Dispositivos de televisión |
Y diferentes propiedades para cada media type y media queries:
| Propiedad | Valor | Compatibilidad |
|---|---|---|
aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
max-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
min-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
device-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-aspect-ratio | <relación de aspecto> | FF3.5, S1, C1, O9.5, CSS3 |
color | <entero> | FF3.5, S1, C1, O10, CSS3 |
max-color | <entero> | FF3.5, S1, C1, O10, CSS3 |
min-color | <entero> | FF3.5, S1, C1, O10, CSS3 |
color-index | <entero> | FF3.5, S1, C1, O10, CSS3 |
max-color-index | <entero> | FF3.5, S1, C1, O10, CSS3 |
min-color-index | <entero> | FF3.5, S1, C1, O10, CSS3 |
device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
device-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-device-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-device-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-height | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
monochrome | <entero> | FF3.5, S1, C1, O10, CSS3 |
max-monochrome | <entero> | FF3.5, S1, C1, O10, CSS3 |
min-monochrome | <entero> | FF3.5, S1, C1, O10, CSS3 |
orientation | <portrait, landscape> | FF3.5, S1, C1, CSS3 |
resolution | <resolución> | FF3.5, S1, C1, O10, CSS3 |
max-resolution | <resolución> | FF3.5, S1, C1, O10, CSS3 |
min-resolution | <resolución> | FF3.5, S1, C1, O10, CSS3 |
scan | <progressive, interlaced> | FF3.5, S1, C1, O10, CSS3 |
width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
max-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
min-width | <tamaño> | FF3.5, S1, C1, O9.5, CSS3 |
