comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

Responsive Design con Media Querys

  • 0 Respuestas
  • 1453 Vistas

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

Desconectado c0rnc0d

  • *
  • Underc0der
  • Mensajes: 4
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
« en: Febrero 09, 2016, 05:59:17 pm »
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: No tienes permisos para ver links. Registrate o Entra con tu cuenta
#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: No tienes permisos para ver links. Registrate o Entra con tu cuenta
@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: No tienes permisos para ver links. Registrate o Entra con tu cuenta
<meta name="viewport" content="width=device-width, initial-scale=1">
« Última modificación: Febrero 09, 2016, 09:34:06 pm por EPSILON »

 

¿Te gustó el post? COMPARTILO!



[CODIGO FUENTE] Formulario Responsive con HTML5 y CSS3

Iniciado por graphixx

Respuestas: 3
Vistas: 3415
Último mensaje Noviembre 05, 2016, 04:01:59 am
por Wallcroft
[SOURCE] Menu Touch y Responsive

Iniciado por graphixx

Respuestas: 0
Vistas: 546
Último mensaje Junio 12, 2018, 07:08:05 pm
por graphixx