Rol de los fondos en el responsive design
Juan Pablo Romero
Juan Pablo Romero
Software EngineerEs una verdad, el fondo es una tortura a menos de que sea un patrón o se trabaje para un solo dispositivo, pero en este momento, con las variadas resoluciones de pantalla y los diferentes dispositivos móviles, los usuarios quieren ser sorprendidos con algo diferente y el fondo es un punto muy importante que puede marcar la diferencia.
Ahora bien, sucede se tiene un fondo como el de la imagen anterior, la línea básica de estilo es:
body {
background-image: url(bg_body.png);
}
.. y este es el resultado :
Bueno en realidad no es lo que se espera, y si...
body {
background-image: url(bg_body.png);
background-repeat: no-repeat;
background-position: left top;
}
Parece que ese resultado tampoco es el requerido y seguro no va a descrestar al usuario, entonces se debe comenzar a pensar en soluciones como: hacer el fondo más grande o ajustes en algún programa de edición de imágenes, pero eso no siempre es muy conveniente, hay que tener varias cosas en cuenta como: el peso del archivo o la pixelación en caso de que sea un archivo demasiado pequeño.
La solución Bienvenido css3 :)
Los nuevos atributos de css en su tercera versión y el diseño de sitios web sensibles traen la solución casi definitiva a este problema.
Bien a hacer lo básico:
body {
background-image: url(bg_body.png);
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
El resultado :
El peso de la imagen es el mismo al igual que su tamaño en pixeles, pero ahora esta cubriendo el área total del body.
El background-size cover es una propiedad css3 que se ajusta al tamaño del contenedor sin necesidad de un alto o ancho especificado, para cualquier resolución de pantalla.
Listo ahora el fondo se auto ajusta a nuestras pantallas problemas resuelto . o no?
Bueno sucede que surge otro reto, dispositivos móviles,
Tomemos como referencia el iPad, el cual sirve como punto de partida para comenzar un proyecto que soporte responsive design. Las propiedades que se utilizan anteriormente solucionan muy bien los problemas que se generan en una pantalla de PC o un portátil sin tener que modificar las imágenes, pero ese tipo de pantallas no responden a la variación de ángulo (modos landscape o portrait). La imagen anterior muestra, haciendo uso de las propiedades mencionadas anteriormente, cómo responde un dispositivo como iPad, comportamiento muy similar en otros
dispositivos. Solución css3 y diseño sensible junto a la propiedad media query:
Hagamos el avanzado:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
body {
background-image: url(bg_body.png);
-moz-background-size: auto;
-webkit-background-size: auto;
background-size: auto;
}
}
El media query reconoce el tamaño del dispositivo en el cual se renderiza el sitio y toma los tamaños definidos en el css para mostrar los atributos únicamente donde el tamaño o la posición se cumplan.
Este fue un tip ajustado para un fondo, pero las posibilidades de los media query permiten ajustar cualquier elemento del DOM, en un próximo post mostraremos otras posibilidades de esta poderosa herramienta.
Bueno para finalizar dejamos un listado de media query que hasta ahora se utilizan en cuanto a diseño sensible para los dispositivos más comunes:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
@media only screen and (min-width : 321px) {
}
@media only screen and (max-width : 320px) {
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
@media only screen and (min-width : 1224px) {
}
@media only screen and (min-width : 1824px) {
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
Compatibilidad: IE9+ - Ffox 3+ - Chrome - Safari 2+
Enlaces relacionados:
Written by Juan Pablo Romero
Juan Pablo Romero
Juan Pablo designs and builds robust software solutions with a focus on performance and usability. His problem-solving skills and attention to detail ensure high-quality and efficient applications.
