Responsive Design con Media Querys
(http://4.bp.blogspot.com/-TxAhpeqobFo/VLwomrrws-I/AAAAAAAAAFA/HmR1dl0VMAA/s1600/this-is-the-web.png)
CSS nos permite maquetar webs adaptables a las pantallas para moviles.
La idea es partiendo de un diseño base, ir cambiando solo lo necesario para adaptarlo al dispositivo.
Tenemos CSS:
#div1{display:inline-block;widht:70%;}para que
#div1 ocupe el 100% según el ancho de la pantalla usamos la media query.
@media screen and (max-width:960px)
{
#div1
{
widht:100%;
}
}Cuando la pantalla tenga un ancho igual o menor a 960px, cambiamos el ancho de #div1 a 100%
Las
media querys van al final del código.
Añadir el atributo viewport, para que el navegador sepa la escala correcta.
<meta name="viewport" content="width=device-width, initial-scale=1">