DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
17-10-2013

Uno de los grandes retos para los diseñadores web es lograr adaptar las aplicaciones web para que se visualice correctamente en la inmensa cantidad de dispositivos que cuentan con un navegador web incorporado; ustedes se podrian preguntar ¿porque es esto tan importante?, la respuesta a esta pregunta reside en el hecho de que el tráfico móvil engulle más del 17% y se prevé que esta cifra seguirá en aumento.

El diseño web responsivo nos permite adaptar nuestras aplicaciones web a distintos tamaños de pantalla (PC, tablet, teléfonos inteligentes, televisores, etc) aplicando solo CSS (o casi todo); sin la necesidad de crear una página para cada dispositivo o tamaño de pantalla.

Básicamente debemos de adaptar todo el contenido en una pagina web para que se vea "bien" en todos los dispositivos, sin que aparezca el muy molesta scroll horizontal; es decir se reajusta el contenido de toda la página web.

En esta técnica utilizamos principalmente los media queries y tamaños de los elementos en porcentajes, todo con CSS (o casi todo); los media queries nos permite activar y desactivar secciones del CSS según el tamaño de pantalla; nos permite definir nuevos estilos al sitio para ajustarse a las diferentes resoluciones de pantalla:

@media screen and (max-width: 1024px) {
/* ventanas de menos de 1024px */
}
@media screen and (max-width: 480px) {
/* ventanas de menos de 480px */
}
@media screen and (max-width: 320px) {
/* ventanas de menos de 320px */
}

Publicidad

Give me for a beer!

Algunos artículos que te pueden interesar

¿Cómo hacer una simple galería responsive con CSS 2?

¿Cómo hacer una simple galería responsive con CSS 2?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más.

Andrés Cruz 13-11-2014

¿Cómo cubrir todo el fondo con una imagen con CSS?

¿Cómo cubrir todo el fondo con una imagen con CSS?

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

Andrés Cruz 16-09-2014

¿Cómo hacer una simple galería responsive con CSS 1?

¿Cómo hacer una simple galería responsive con CSS 1?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más.

Andrés Cruz 10-11-2014