¿Cómo tengo que situar los media-queries para diseño responsive?

publicado por: Anonymous

He estado utilizando por primera vez este media query que encontré en esta página

> enlace

/* ESTILOS NORMALES (para móviles en vertical)
   ========================================================================= /

body { }

/ RESPONSIVE
   ========================================================================= /

/ Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- /
@media (min-width: 768px) { }

/ Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- /
@media (min-width: 1024px) { }

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

Todo funciona correctamente hasta que utilizo el Toggle Device Toolbar de responsive que tiene Google Chrome: no funciona el query para teléfonos.

Ejemplo:

Intenté aplicar el “background-color” a cada body en cada uno de los diferentes tamaños con diferente color, y todos funcionaron cuando readapté la ventana del navegador, pero cuando utilicé la herramienta de Google Chrome, el color que le apliqué a las Tablets se repite en el de los teléfonos.

¿Como puedo corregir ese error?

solución

Recuerde que el css se ejecuta en cascada
por ejemplo si usted tiene

body{
  color:red;
  color:blue; 
}

el navegador tomara en cuenta la ultima linea color blue

ustede debera ponerlo en el siguiente orden

body {
   background-color:red;
}

@media (min-width: 768px) {
   background-color:orange;
 }

aca el navegador tomara en cuenta la ultima linea cuando la ventana mida 768px hacia arriba tomara el fondo orange de lo contrario tendria que usar !import pero no se recomienda usarlo demasiado

el siguiente ejemplo seria una pesima idea no lo use asi
El navegador tomaria en cuenta la ultima linea y no funcionaria el media query

@media (min-width: 768px) {
   background-color:orange;
 }

body {
   background-color:red;
}

no olvide por si lo olvida colocar la etiqueta meta vieport en el head de su pagina

etiqueta meta viewport

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *