Medidas mas comunes para las media queries de CSS

Hoy vamos a revisar las medidas de las Media Queries mas utilizadas por los navegadores en los diferentes dispositivos desde PC, tablets, móviles, etc.

Lo mas común en basarnos en un Framework ya predefinido como Bootstrap 3, por lo que tendremos una base o estructura a la cual basarnos para poder crear nuestras paginas webs o maquetaciones visuales.

Por mi experiencia es mucho mas practico empezar la programación de CSS resposnsive en Cascada, es decir empezar por las resoluciones mas grandes primero, esto viene apoyado que la importancia de estilos viene dada también en cascada, es decir de arriba hacia abajo, donde los estilos mas abajo son mas prioritarios que los primeros.

/* 
   ========================================================================= */
   body { ... } p { ... }, a{...}, H1{...},    


/*  RESPONSIVE
   ========================================================================= 

 Escritorios muy grandes
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) { }   
   

/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) { ... }   /

/* Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */
@media (max-width: 767px) { ... }   /

/* Móviles en vertical
   ------------------------------------------------------------------------- */
@media (max-width: 480px) { ... }

 

Aunque muchos Framework trabajan de forma inversa, es decir de abajo hacia arriba, las resoluciones mas grandes abajo y las mas pequeñas arriba, es una forma de trabajar efectiva si te acostumbras a ello y no rompes la jerarquía de lo ultimo es lo que mas importancia tiene.

Espero que les sirva de ayuda   🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *