Problema con Media Queries

[rubiomike]

Hola a todos, estoy diseñando una web en la que estoy teniendo problemas a la hora de implementar correctamente los media queries para dispositivos móviles. Básicamente lo que quiero es un diseño alternativo para tablets y otro para Smartphones.

Cuando solo tengo la versión de escritorio y la de las tablets todo funciona correctamente, pero al introducir los media queries para los smartphones, se sobrescribe las reglas para las tablets y se ve igual tanto en tablets como en smartphones

Dejo el código por si alguien me puede indicar donde se encuentra el fallo

Código:

/* Tablets  Landscape */

@media (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 

 /* Aquí van los estilos */

}

/* Tablets Portrait*/

@media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)  { 

 /* Aquí van los estilos */
}


/*Smartphones  Landscape*/
@media only screen and (max-device-width: 854px) and (orientation: landscape) {

 /* Aquí van los estilos */

}

/*Smartphones Portrait*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {

 /* Aquí van los estilos */

}

¿Alguien puede decirme porque al añadir la sección de Smartphones se sobrescribe la sección de las tablets?

Un saludo a todos, y gracias

[siddartha23]

Tus @media quieries están seteados de esta manera: por debajo de 320px se aplican los estilos para "Smartphones Portrait" , por encima de 320px hasta 800px "Tablets Portrait" y luego de 800px hasta 854px "Smartphones Landscape" ... te recomiendo trabajar medidas líquidas para evitar tanto portrait-landscape así tendrías menos breakpoints...

[rubiomike]

Gracias por responder siddartha23. Vale ya veo el problema, pero ahora tengo la duda de cuales serían las medidas necesarias para afectar a las tablets y a los smartphones. He buscado bastante por Internet pero es un jaleo porque hay muchísimas.

La razón por la que distingo entre landscape y portrait es porque en este diseño en concreto se me hace estrictamente necesario.

Un abrazo