La verdad es que no hace mucho Web designer Wall me ha salvado el culo en el tema del diseño responsivo (hacer que una web se adapte al tamaño de la ventana). Tras mucho tiempo rompiéndome la cabeza, tirando de jQuery y Javascript con pirulas cosa mala para lograr modificar el tamaño del texto, las posiciones de las imágenes… un coñazo y además ineficiente y poco compatible entre navegadores (menos mal que para móviles jQueryMobile me safaba muchas veces), pues tras mucho tiempo, como te iba diciendo, me encuentro este artículo, que ya tiene un par de años y me quedo como «coño, así es más fácil«. La siguiente explicación es una medio traducción/adaptación/explicación del tema, ya que se que en muchos casos lo que buscáis en este blog es una explicación en castellano de algo que ya hay en inglés. Espero que os sirva de ayuda.
Bueno, empezando desde un principio ¿por qué es importante el diseño responsivo? Porque los tiempos en los que el usuario visualizaba webs en su ordenador, con un rango de pantallas que solía oscilar entre las 14 y las 20 pulgadas en el 90% de los casos, ya pasó, es una reliquia de la década pasada, como MySpace, las PDA’s o que en la liga de fútbol española pueda ganar algo un equipo que no sea Madrid o Barcelona. Ahora te puedes encontrar desde el que usa una tele con una definición de 2560px al que lo ve en su teléfono móvil con una de 320px. Los tamaños fijos son un coñazo, y el usar porcentajes para todo… no siempre funciona, porque el tamaño de la fuente o las imágenes no se adaptan, y a veces hay que usar posicionamientos absolutos y te da la risa. CSS2 permitía diferenciar entre una hoja de estilos para la impresión y otra para la presentación en pantalla. CSS3 nos permite ir más allá, nos permite conocer el tamaño de la ventana/pantalla del dispositivo y aplicar un estilo diferente para cada pantalla. Voy a aprovecharme del artículo antes citado y enlazarte aquí con un ejemplo donde verás cómo funciona esto.
Visto esto, aquí tienes la explicación del cómo se hace, sacada del mismo artículo:
Max Width
En este caso el css se aplicará si trabajamos con una resolución de un máximo de 600 pixeles:
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
Si quieres enlazarlo a una archivo CSS distinto, puedes hacerlo poniendo esta línea en la cabecera del documento:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Min Width
Al contrario que en el ejemplo de arriba, en este caso se especificará un tamaño mínimo para utilizar este estilo (en este caso, se aplicará a toda las resoluciones mayores de 900px).
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Media Queries múltiples
Tienes también la opción de utilizar dos valores a la vez, máximo y mínimo, para que el estilo se aplique a los comprendidos entre esos valores. En este caso, entre 600 y 900 px.
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Max device
Finalmente está la opción de adaptarlo a la máxima resolución del dispositivo. Los ejemplos anteriores hacen referencia al tamaño de la ventana/area de visualización, mientras que este se referiría a la resolución máxima que pueda mostrar el teléfono/ordenador/tableta en cuestión.
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
En el artículo original arriba referenciado podéis encontrar también código para adaptarlo específicamente para iPad y iPhone4. No tiene mucha ciencia, podréis ver los ejemplos de código pinchando allí, además hay páginas de ejemplo al final.
Lo interesante está en uno de los puntos finales, donde comentan que, como siempre, va a haber problemas con Explorer. Bueno, no hay que ser 100% injusto con Microsoft, en principio Explorer 9 va bien, pero en las versiones anteriores la cosa ya no va por ningún lado. Dan varias soluciones, pero yo recomiendo la del plugin de jQuery para hacer furrular las media queries, que está en este ejemplo. Hay varios artículos más sobre diseño responsivo en esta página, así que intentaré próximamente meter un par de estas medio traducciones.
DonnierocK 