¿Qué es el Diseño Web Responsivo HTML?
El Diseño Web Responsivo HTML hace que tu sitio web sea visible adecuadamente en los diferentes dispositivos como una PC, una Tablet o un Smart Phone.
Para el Diseño Web Responsivo es necesario utilizar CSS y HTML para ajustar tamaños, mostrar u ocultar contenidos para que sean vistos adecuadamente en todos los dispositivos.
Nota: Una página web debe verse bien, y ser fácil de usar, independientemente del dispositivo!
Crea tu propio Diseño Responsivo
Una forma de crear Diseños Responsivos, es crearlo uno mismo:
.bloque {
float: left;
margin: 5px;
padding: 15px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
Con esta clase puedes aplicarla a cada bloque para que los muestre de izquierda a derecha y al llegar al final de pantalla continuara hacia abajo y continuara sucesivamente hasta terminar de mostrar todos los bloques. Si la pantalla es muy angosta como en un celular con este comportamiento ajustara para se muestren hacia abajo.
Usando W3.CSS
Otra forma de crear un Diseño Responsivo, es usar una hoja de estilos responsivo, como W3.CSS. Es decir, utilizando un Framework. W3.CSS hace fácil desarrollar sitios que luzcan bien y ajustable a los diferentes tamaños de pantalla (en dispositivos como pc's, Tablet o smartphones) .
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
Agregando este link entre las etiquetas <head> del HTML cargamos las clases de este Framework y podremos utilizarlas para nuestro sitio.