HTML para principiantes (Parte 16): Diseño responsivo o adaptable

Redes sociales

¿Qué es el Diseño Web responsivo o adaptable?

El Diseño Web responsivo hace que tu página web se ve bien en cualquier dispositivo (equipos de escritorio, tabletas y móviles).

El diseño web responsivo se consigue utilizando CSS y HTML para redimensionar, ocultar, reducir, ampliar, o mover el contenido para que se vea bien en cualquier tipo de pantalla.

Diseño web responsivo

Crea tu propio diseño responsivo

Una forma de crear una web que se visualice bien en cualquier tipo de dispositivo, es haciéndolo tu mismo:

Ejemplo

<!DOCTYPE html>
<html lang="es-es">
<head>
<style>
.city {
 float: left;
 margin: 5px;
 padding: 15px;
 width: 300px;
 height: 300px;
 border: 1px solid black;
} 
</style>
</head>
<body>
 <h1>Demo de diseño web responsivo</h1>
 <div class="city">
 <h2>Londres</h2>
 <p>Londres es la capital de Inglaterra.</p>
 <p>Es la ciudad más poblada del Reino Unido,
 con un área metropolitana de alrededor de 13 millones de habitantes.</p>
 </div>
 <div class="city">
 <h2>París</h2>
 <p>París es la capital de Francia.</p>
 <p>El área de París es una de las más pobladas de Europa,
 con más de 12 millones de habitantes.</p>
 </div>
 <div class="city">
 <h2>Tokio</h2>
 <p>Tokio es la capital de Japón.</p>
 <p>Es el área metropolitana más poblada del mundo,
 con más de 36 millones de habitantes.</p>
 </div>
</body>
</html>

Resultado en el navegador

Haz clic aquí para ver el resultado en una nueva ventana. Una vez abierto, redimensiona  la ventana del navegador y observa, como el contenido se adapta al ancho de la misma.

Utiliza una hoja de estilo prediseñada

Otra forma de crear un diseño responsivo, es utilizar alguna hoja de estilos especialmente diseñada para ello, como knacss.css

knacss.css es un “framework” CSS diseñado por Raphaël Goetter et Alsacréations. Ayuda a crear sitios web más ligeros y accesibles, está construido especialmente para HTML5, CSS3 y los nuevos estandares de diseño “Responsive”.

Con knacss.css te será fácil desarrollar sitios que se vean bien en cualquier tamaño de pantalla; escritorio, portátil, tableta o teléfono.

Ejemplo

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="knacss.css">
<body>
 <h1>W3.CSS Demo</h1> 
 <p>Redimensiona esta página</p> 
 <div class="grid-3"> <!-- parent div (ou autre) de 3 colonnes -->
 <div style="padding: .5em; background: #eee; border: 1px solid #aaa">
 <h2>Londres</h2>
 <p>Londres es la capital de Inglaterra.</p>
 <p>Es la ciudad más poblada del Reino Unido,
 con un área metropolitana de alrededor de 13 millones de habitantes.</p>
 </div>
 <div style="padding: .5em; background: #eee; border: 1px solid #aaa">
 <h2>París</h2>
 <p>París es la capital de Francia.</p>
 <p>El área de París es una de las más pobladas de Europa,
 con más de 12 millones de habitantes.</p>
 </div>
 <div style="padding: .5em; background: #eee; border: 1px solid #aaa">
 <h2>Tokio</h2>
 <p>Tokio es la capital de Japón.</p>
 <p>Es el área metropolitana más poblada del mundo,
 con más de 36 millones de habitantes.</p>
 </div>
 </div>
</body>
</html>

Resultado en el navegador

Haz clic aquí para ver el resultado en una nueva ventana. Una vez abierto, redimensiona  la ventana del navegador y observa, como el contenido se adapta al ancho de la misma.

Puedes descargar el archivo knacss.css desde aquí.

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.