Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Duda con diseño responsive

Estas en el tema de Duda con diseño responsive en el foro de CSS en Foros del Web. Una duda que tengo sobre el diseño responsive. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original @media screen and (max-width: 320px){       footer {   ...
  #1 (permalink)  
Antiguo 30/12/2013, 21:14
Avatar de bocho0610  
Fecha de Ingreso: enero-2010
Ubicación: <? echo "Santiago, Chile"; ?>
Mensajes: 341
Antigüedad: 11 años, 11 meses
Puntos: 26
Duda con diseño responsive

Una duda que tengo sobre el diseño responsive.

Código CSS:
Ver original
  1. @media screen and (max-width: 320px){
  2.       footer{
  3.             font-size: 12px;
  4.       }
  5. }
  6.  
  7. @media screen and (max-width: 480px){
  8.       footer{
  9.             font-size: 18px;
  10.       }
  11. }

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!
__________________
Sigueme en Twitter!
Septimoarte.cl <-- Un mundo en cine.
  #2 (permalink)  
Antiguo 30/12/2013, 21:34
 
Fecha de Ingreso: marzo-2013
Mensajes: 11
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Duda con diseño responsive

Código CSS:
Ver original
  1. @media screen and (max-width: 320px){
  2.       footer{
  3.             font-size: 12px;
  4.       }
  5. }
  6.  
  7. @media screen and (max-width: 480px){
  8.       footer{
  9.             font-size: 18px;
  10.       }
  11. }
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:
Ver original
  1. @media only screen and (min-width: 321px) and (max-width: 480px)  {
  2.  
  3.     }
  #3 (permalink)  
Antiguo 31/12/2013, 04:10
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 9 años, 5 meses
Puntos: 47
Respuesta: Duda con diseño responsive

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:
Ver original
  1. @media screen and (max-width: 320px) /*afecta si la pantalla es inferior a 320px*/{
  2.       footer{
  3.             font-size: 12px;
  4.       }
  5. }
  6.  
  7. @media screen and (max-width: 480px) /*afecta si la pantalla es inferior a 480px* (también incluye si es inferior a 320px)/{
  8.       footer{
  9.             font-size: 18px;
  10.       }
  11. }


Si invirtieras el orden
Código CSS:
Ver original
  1. @media screen and (max-width: 480px)/*afecta si el ancho es inferior a 480*/{
  2.       footer{
  3.             font-size: 18px;
  4.       }
  5. }
  6.  
  7.  
  8. @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)*/{
  9.       footer{
  10.             font-size: 12px;
  11.       }
  12. }


Ten en cuenta que la hoja de estilo la lee de arriba abajo y el orden de los factores sí altera el producto
  #4 (permalink)  
Antiguo 01/01/2014, 09:38
Avatar de bocho0610  
Fecha de Ingreso: enero-2010
Ubicación: <? echo "Santiago, Chile"; ?>
Mensajes: 341
Antigüedad: 11 años, 11 meses
Puntos: 26
Respuesta: Duda con diseño responsive

Cita:
Iniciado por eamexicano Ver Mensaje
Código CSS:
Ver original
  1. @media screen and (max-width: 320px){
  2.       footer{
  3.             font-size: 12px;
  4.       }
  5. }
  6.  
  7. @media screen and (max-width: 480px){
  8.       footer{
  9.             font-size: 18px;
  10.       }
  11. }
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:
Ver original
  1. @media only screen and (min-width: 321px) and (max-width: 480px)  {
  2.  
  3.     }
Cita:
Iniciado por JustinKO Ver Mensaje
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:
Ver original
  1. @media screen and (max-width: 320px) /*afecta si la pantalla es inferior a 320px*/{
  2.       footer{
  3.             font-size: 12px;
  4.       }
  5. }
  6.  
  7. @media screen and (max-width: 480px) /*afecta si la pantalla es inferior a 480px* (también incluye si es inferior a 320px)/{
  8.       footer{
  9.             font-size: 18px;
  10.       }
  11. }


Si invirtieras el orden
Código CSS:
Ver original
  1. @media screen and (max-width: 480px)/*afecta si el ancho es inferior a 480*/{
  2.       footer{
  3.             font-size: 18px;
  4.       }
  5. }
  6.  
  7.  
  8. @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)*/{
  9.       footer{
  10.             font-size: 12px;
  11.       }
  12. }


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
__________________
Sigueme en Twitter!
Septimoarte.cl <-- Un mundo en cine.

Etiquetas: diseño, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:23.