¿Que necesitas?


Cuéntanos que tienes en mente y te contestaremos lo mas rápido posible con un presupuesto sin compromiso.

Introduce tu nombre completo.

Invalid email address.

Invalid Input

Invalid Input

Invalid Input

Valor incorrecto

Solicita presupuesto
Jueves, 24 Septiembre 2015 07:12

Media Queries, medidas para diseño web adaptativo

Hoy día, es muy importante hacer una web que se adapte a todos los dispositivos móviles ya que un gran porcentaje de las visitas provienen de estos. Por eso hoy vamos a enseñaros cuales son las medidas estándar a la hora crear una web. Vamos a ello.

Hay dos formas de plantearse el diseño de una web, diseñar de menos a mas (bottom-top), es decir, empezar a crear la web en el smartphone y acabar con la vista de escritorio normal. Este método es el mas óptimo ya que es mucho más sencillo ir agrandando la web que tener que ajustar los elementos de un monitor en un smartphone o tablet. Normalmente, tendremos estos 4 tramos o vistas:

  • Smartphone Vertical (Estilos normales)
  • Smartphone Horizontal / Tablet vertical (Ancho mínimo de 768px)
  • Tablet Horizontal (Ancho mínimo de 1024px)
  • Escritorio Normal (Ancho mínimo de 1200px)

bottom top

 

/* ################### BOTTOM-TOP ###################### */


/* -------------------- Estilos Normales (Smartphone Vertical) -------------------------*/


body { ... }

p { ... }


 
/* -------------------- Ancho Mínimo 768px (Smartphone Horizontal / Tablet Vertical) -------------------------*/


@media (min-width: 768px) {

body { ... }

p { ... }

}

/* -------------------- Ancho Mínimo 1024px (Tablet Horizontal) -------------------------*/


@media (min-width: 1024px) {

body { ... }

p { ... }

}  

/* -------------------- Ancho Mínimo 1200px (Monitor Normal) -------------------------*/


@media (min-width: 1024px) {

body { ... }

p { ... }

}


La siguiente forma que hay de empezar un diseño web, es totalmente al contrario, empezar diseñando la web para un monitor grande e ir ajustando los elementos a los demás anchos de pantalla mas pequeños (top-bottom). Personalmente esta forma de diseñar no me entusiasma demasiado, ya que es más complicado y en muchas ocasiones es muy difícil de ajustar todo. Es mas fácil meter algo pequeño en una caja grande que algo grande en una caja pequeña. No obstante por si alguno se siente mas cómodo utilizando esta segunda forma, os voy a dejar las queries. Los tramos son:

  • Escritorio Normal
  • Tablets Horizontal / Escritorios Normales (Ancho mínimo 768px y Máximo 1199px)
  • Smartphone Horizontal / Tablet Vertical (Ancho máximo 767px)
  • Smartphone Vertical (Ancho máximo 480px)

 

top bottom

 

 

 

/* ######################### TOP-BOTTOM ###################### */


/* -------------------- Estilos Normales (Escritorios Grandes) -------------------------*/


body { ... }

p { ... }


  /* -------------------- Ancho Mínimo 768px y máximo 1199px (Tablet Horizontal / Escritorios Normales) -------------------------*/


@media (min-width: 768px) and (max-width: 1199px) {


body { ... }

p { ... }

 

}

/* -------------------- Ancho Máximo 767px (Smartphone Horizontal / Tablet Vertical) -------------------------*/  


@media (max-width: 767px) {

body { ... }

p { ... }

}  

/* -------------------- Ancho Maximo 480px (Smartphone Vertical) -------------------------*/


@media (max-width: 480px) {
  

   body { ... }
   p { ... }

}

 


Actualmente existen frameworks como Bootstrap que vienen ya con configurados y perfectamente diseñados para que utilizándolos nos faciliten muchísimo la tarea de realizar una web de forma responsiva. Esperamos que esta información os haya sido de ayuda, y si tenéis alguna duda, podéis dejar vuestros comentarios y os ayudaremos en todo lo que necesitéis.

 

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de usuario.
Ver política