[SOLUCIONADO] Duda con diseño responsive

[bocho0610]

Una duda que tengo sobre el diseño responsive.

Código CSS:

@media screen and (max-width: 320px){
      footer{
            font-size: 12px;
      }
}
 
@media screen and (max-width: 480px){
      footer{
            font-size: 18px;
      }
}
 

Si hago esto, en un dispositivo de 320px no funciona, ya que el estilo de 480px lo pisa. Arriba de 480px funciona normal, a menos que haga un estilo de 640px.

Porque ocurre este problema??

Gracias!

[eamexicano]

Código CSS:

@media screen and (max-width: 320px){
      footer{
            font-size: 12px;
      }
}
 
@media screen and (max-width: 480px){
      footer{
            font-size: 18px;
      }
}
 

Por el CSS en tus reglas solo indicas el tamaño máximo pero no el mínimo.
Intenta en tu segundo media query utilizar un tamaño mínimo para ver si así se evita que se sobrescriba el estilo.
Saludos

Código CSS:

@media only screen and (min-width: 321px) and (max-width: 480px)  {
 
    }
 

[JustinKO]

A parte de como dice eamexicano ¿no te funciona si las inviertes?
pones primero la del ancho de 480px y te cambia si la pantalla es más pequeña que esa resolución, pero la segunda solo afecta si es más pequeña que 320 px.

Como lo tienes ahora

Código CSS:

@media screen and (max-width: 320px) /*afecta si la pantalla es inferior a 320px*/{
      footer{
            font-size: 12px;
      }
}
 
@media screen and (max-width: 480px) /*afecta si la pantalla es inferior a 480px* (también incluye si es inferior a 320px)/{
      footer{
            font-size: 18px;
      }
}
 

Si invirtieras el orden

Código CSS:

@media screen and (max-width: 480px)/*afecta si el ancho es inferior a 480*/{
      footer{
            font-size: 18px;
      }
}
 
 
@media screen and (max-width: 320px)/*afecta si el ancho es inferior a 320px. (En este caso no afecta si fuera inferior a 480px pero superior a 320px)*/{
      footer{
            font-size: 12px;
      }
}
 

Ten en cuenta que la hoja de estilo la lee de arriba abajo y el orden de los factores sí altera el producto

[bocho0610]

Iniciado por eamexicano

Código CSS:

@media screen and (max-width: 320px){
      footer{
            font-size: 12px;
      }
}
 
@media screen and (max-width: 480px){
      footer{
            font-size: 18px;
      }
}
 

Por el CSS en tus reglas solo indicas el tamaño máximo pero no el mínimo.
Intenta en tu segundo media query utilizar un tamaño mínimo para ver si así se evita que se sobrescriba el estilo.
Saludos

Código CSS:

@media only screen and (min-width: 321px) and (max-width: 480px)  {
 
    }
 

Iniciado por JustinKO

A parte de como dice eamexicano ¿no te funciona si las inviertes?
pones primero la del ancho de 480px y te cambia si la pantalla es más pequeña que esa resolución, pero la segunda solo afecta si es más pequeña que 320 px.

Como lo tienes ahora

Código CSS:

@media screen and (max-width: 320px) /*afecta si la pantalla es inferior a 320px*/{
      footer{
            font-size: 12px;
      }
}
 
@media screen and (max-width: 480px) /*afecta si la pantalla es inferior a 480px* (también incluye si es inferior a 320px)/{
      footer{
            font-size: 18px;
      }
}
 

Si invirtieras el orden

Código CSS:

@media screen and (max-width: 480px)/*afecta si el ancho es inferior a 480*/{
      footer{
            font-size: 18px;
      }
}
 
 
@media screen and (max-width: 320px)/*afecta si el ancho es inferior a 320px. (En este caso no afecta si fuera inferior a 480px pero superior a 320px)*/{
      footer{
            font-size: 12px;
      }
}
 

Ten en cuenta que la hoja de estilo la lee de arriba abajo y el orden de los factores sí altera el producto

Gracias!! Las dos alternativas me funcionaron a la perfección!

Saludos y Feliz Año Nuevo :D