El Diseño Web Adaptable nos permite crear una web que se adapte a la resolución del dispositivo que la visita, es decir, que el diseño para movil, laptop y escritorio sea diferente.
Las Media Querys nos permiten cambiar el diseño de la web dependiendo del ancho de la pantalla, lo mejor es que solo hace falta saber algo de CSS.
La idea es partiendo de un diseño base, ir cambiando solo lo necesario para adaptarlo al dispositivo.
Tenemos CSS:
#articulo,#panel{display:inline-block;widht:70%;}
#panel{widht:30%;}
Esto nos mostrara el #panel a la derecha de #articulo, ocupando todo el ancho de su elemento contenedor.
En los móviles el ancho es menor y puede que queramos que el artículo ocupe el 100% de la pantalla.
Aquí es donde usamos la media query, seleccionamos el ancho en el que queremos cambiar el diseño, voy a usar 960px (Iphone).
@media screen and (max-width:960px){ #articulo { widht:100%;
}
}
Le digo al navegador que cuando la pantalla tenga un
ancho máximo de 960px, el ancho de #articulo sea el 100%
para que se vea mejor en el móvil. El elemento #panel
pasará a estar por debajo de #articulo.
Recomiendo tener las media querys al final
del css y solo cambiar lo necesario.
No se nos puede olvidar la el atributo viewport del tag meta,
para que el navegador sepa la escala correcta de
la pantalla del dispositivo movil.
Este tag se añade en el head de nuestro html.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
SKA SKA SKA...!!!!