Responsive Design con Media Querys

Iniciado por c0rnc0d, Febrero 09, 2016, 05:59:17 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Febrero 09, 2016, 05:59:17 PM Ultima modificación: Febrero 09, 2016, 09:34:06 PM por EPSILON
Responsive Design con Media Querys


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:
Código: php
#div1{display:inline-block;widht:70%;}


para que #div1 ocupe el 100% según el ancho de la pantalla usamos la media query.

Código: php
@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.
Código: php
<meta name="viewport" content="width=device-width, initial-scale=1">