Uso básico CSS3 Media Queries para crear versiones web para móvil
Con las reglas @media de CSS3 conseguimos mejorar la experiencia del usuario que entra en un site, independientemente del dispositivo que se use. Adaptando la web a las resolución y medidas del dispositivo que se esté usando, claro siempre y cuando tengamos las reglas para ese dispositivo en nuestro css.
Podremos definir conjuntos de estilos dependiendo de propiedades comunes de los dispositivos y se pueden ajustar propiedades específicas para el alto, ancho, la relación de aspecto, el número de colores disponibles, etc.
Hasta el momento necesitábamos JavaScript para obtener información del navegador del usuario y conocer el tamaño de la ventana. En CSS3 tenemos las media queries con las que podemos obtener bastante información de las propiedades del navegador o dispositivo que se está usando para acceder a nuestro site.
Las propiedades más importantes que tendremos que tener en cuenta para dispositivos móviles son las siguientes:
1
2
3
4
5
6
<ul>
<li>Aspect-ratio: Mira las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9 por ejemplo.</li>
<li> Width y height: Mira las dimensiones del área de visualización. Además pueden ser expresadas en valores mínimos y máximos.</li>
<li> Orientation: Mira si el layout es panorámico ( el ancho es mayor que el alto ) o vertical ( el alto es mayor que el ancho ). Esto nos permite ajustar los diseños para dispositivos con propiedades de giro de la pantalla como el iPhone, y otros smartphones y los tablets.
</li> <li> Resolution: Mira la densidad de los pixeles en el dispositivo de salida. Esto es especialmente útil cuando queremos aprovecharnos de las ventajas de los dispositivos que tiene una resolución mayor a 72 dpi. </li> <li> Color, Color-index y monochrome: Encuentran el número de color o bits por color. Esto nos permite crear diseños específicos para dispositivos monocromáticos.</li> </ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Si no quieres meter todo los estilos css en un mismo archivo puedes segmentarlo en varios.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<head>
<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">
</head>
Navegadores que implementan los media queries
La ténica de los media queries es aceptada ya desde hace algún tiempo por la mayoría de los navegadores, como siempre Internet Explorer es el que da más problemas y sólo lo admiten las últimas versiones.
- Safari 4+
- Chrome 4+
- Firefox 3.5+
- IE9+
Dado que el uso de IE en los móviles es cada día más residual, en mi opinión la técnica de las “media queries” está lista para ser cada vez más ampliamente utilizada en el desarrollo web.
Enlaces de interés:
Documentación W3C http://www.w3.org/TR/css3-mediaqueries/