Duda con diseño responsive

[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