problema cargando mediaqueries

[jakijem]

A pesar de que estoy intentando mantener el numero de mediaqueries al minimo utilizando imagenes flexibles y posicionamientos con %, me veo obligado a utilizar alguno más de los que me gustaría,

Código HTML:

<!-- smartphone 240x320 -->
  <link rel="stylesheet" href="css/smartphone-240.css" media="only screen and (max-width : 240px)">
   
   <!-- smartphone vertical  320x480-->
  <link rel="stylesheet" href="css/smartphone-portrait.css" media="only screen and (max-width : 320px)"> 

Y en el css de cada uno de ellos, tengo:

smartphone-240.css:

Código HTML:

@media only screen and (max-width: 240px) {
estilos}

smartphone-portrait.css:

Código HTML:

@media only screen and (max-width : 320px) {
estilos
}

pero el problema es que cuando la pantalla es de 240x320 no carga su css, sino el de 320x480.

He probado a cambiar la llamada al css en el HTML por:

Código HTML:

<link rel="stylesheet" href="css/smartphone-portrait.css" media="only screen and (min-width: 241px) and (max-width : 320px)"> 

Pero en ese caso no carga el segundo css (el "smartphone-portrait.css")

¿Qué estoy haciendo mal?

[NueveReinas]

¿Por qué no metes el contenido de smartphone-240.css y smartphone-portrait.css en sus respectivas media-queries en un solo CSS?

Así de paso evitas más peticiones al servidor.

[jakijem]

Iniciado por NueveReinas

¿Por qué no metes el contenido de smartphone-240.css y smartphone-portrait.css en sus respectivas media-queries en un solo CSS?

Así de paso evitas más peticiones al servidor.

SI, es una buena idea, (al menos para reducir las peticiones), ya lo he cambiado y funciona, pero si no carga cada css desde su llamada del html, ¿porqué si que lo hace desde sus queries dentro del css? (quiero decir, que la sintaxis era la misma)

Lo que yo creo es que tengo algún error de sintaxis, o de concepto, más bien, pero no logro identificarlo...