1

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?

3 respuestas 3

3

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

1
  • gracias, el error tenia una facil solucion, era el meta viewport que me hacia falta muchas gracias por la ayuda y si tomare en cuenta el consejo :D
    – Sr Jefers
    Commented el 22 dic. 2016 a las 5:41
1

Te recomiendo las siguientes media queries: col-xs- 480 col-sm- 768 col-md- 992 col-lg- 1200

Si estas comenzando, te ayudaría mucho utilizar bootstrap: http://getbootstrap.com/css/

1
  • 1
    realmente queria hacerlo sin utilizar ninguna Framework para poder desarrollar mas mi habilidad :D pero siempre es util :D
    – Sr Jefers
    Commented el 22 dic. 2016 a las 5:40
0

Como sus propias siglas indican, CSS (Cascade StyleSheet) significa hoja de estilos en cascada, lo que quiere decir que los estilos se aplicarán en orden comenzando por el inicio del fichero. Si algún estilo coincide con algún otro, se establecerá el que esté último en el fichero o el que tenga una mayor especificidad.

Por eso, para los media-queries deberías indicarlos de mayor a menor tamaño de pantalla. Si no, si pones que para un tamaño de pantalla de 400px una propiedad cambie y después indicas que para un tamaño de pantalla de 600px cambie esa misma propiedad, como la segunda coincide con la primera (a partir de los 400px), va a utilizar esta última.

En tu caso, sería:

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

/* Escritorios muy anchos
   ------------------------------------------------------------------------- */

@media (min-width: 1200px) { }

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

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.