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

Pregunta:


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?

Preguntado por: Sr Jefers

Sergio Romero

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

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/

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) { }

Fuente

Related Posts:

Como poner una imagen de fondo a pantalla completa – javascript jquery html5
Pregunta: Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no ...
Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Usar variable en otra función con javascript – javascript html app
Pregunta: Primero que todo voy a dejar un enlace donde pueden ver el ejemplo funcionando de manera completa. Enlace a la pagina AQUI El valor elegido en ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
¿Código html antes del anchor text? ¿Tendrían problemas los motores de búsqueda? – html seo
Pregunta: ¿Es posible incluír código html antes del anchor text y si perjudicaría que los pueda leer el crawler del buscador? Es que necesito que ...
Como podría crear un documento txt y añadirle texto con saltos de línea? – javascript html
Pregunta: Por ejemplo: Hola que tal y lo que quiero que escriba en el documento txt: Hola que tal /* Corregido */ var data = "Hola, rn ¿qué rn ...
insertar automáticamente un caracter mientras escribo en un input – jquery html
Pregunta: Necesito insertar el caracter ":" mientras estoy escribiendo números en un input tipo texto, el ":" debe insertarse automáticamente cuando haya escrito dos números, ...
Estilar un pseudoelemento ::after con jQuery – javascript jquery html
Pregunta: ¿Cómo seleccionar desde jQuery un elemento de este estilo? .page-container .single-page:nth-of-type(2)::after { } La idea es poder modificar ciertas reglas CSS desde JavaScript. ...
¿Cómo obtener el valor de una celda de una tabla con Javascript? – javascript html
Pregunta: Estoy haciendo una parte de ventas y pues, lleno la tabla con datos y lo que quiero es, que al hacer clic sobre una ...
TCPDF ERROR: Some data has already been output, can’t send PDF file – php html
Pregunta: Estoy tratando de generar un reporte PDF utilizando TCPDF, pero al ejecutar mi código salta el siguiente error: TCPDF ERROR: Some data has ...
¿Cómo aplicar estilo a barra de desplazamiento textarea? – html5 css3
Pregunta: Existe alguna forma de crear estilos a la barra de desplazamiento de un textarea que sea compatible con todos los navegadores. Este es mi diseño ...
Quitar parpadeo de animation timing function – javascript html css
Pregunta: tenia una duda. Quería conseguir que el fondo de mi web cambiara usando keyframes. Por ello usé animation-timing-function: step-start;. El problema es que sí ...
Acceder a valores enviados por formulario HTML en PHP – php html formularios
Pregunta: Perdon si cometo algún error, pero soy nuevo en este foro. Quiero hacer una decisión en un bloque de php usando un valor de un ...

Add a Comment

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