Diseño web adaptable, adaptativo o flexible

Diseño adaptable, adaptativo o flexible (en inglés responsive design) es aquel mediante el cual un sitio web se pueda visualizar de una forma correcta en todos los diferentes dispositivos que existen en la actualidad y en los que puedan aparecer en el futuro.

En un diseño adaptable la visualización de la página web se ajusta de forma dinámica a las características particulares de cada dispositivo.

Un diseño adaptable se basa en emplear, de forma bastante ingeniosa, ciertas propiedades de CSS que no eran muy conocidas.

 

En un diseño adaptable, la visualización de la página web se ajusta de forma dinámica a las características particulares de cada dispositivo, para ofrecer al usuario la mejor experiencia posible.

Un diseño adaptable se basa en el empleo de Media Queries          

(consulta de los medios, traducido al español) es una técnica CSS introducida en CSS3. Con las media querie podemos adaptar la visualización de la página web en función de diferentes parámetros como la densidad de píxel, la resolución de pantalla, la orientación de la pantalla, y otros parámetros.

  Se utiliza la regla @media para incluir un bloque de propiedades CSS solo si una determinada condición es verdadera.

Ejemplo:

Si la ventana del navegador es más pequeña que 400 px, el color de fondo cambiará a azul claro:

@media only screen and (max-width: 400px) {
    body {
        background-color: lightblue;
    }}

Un elemento clave es que debemos emplear tamaños relativos en vez de tamaños fijos. Hay que emplear unidades de medida como el porcentaje para la anchuras y “em” para los tamaños de texto.   

 

   Fuentes: Activate, Google España

w3cschools,com