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?