mi duda es porque al utilizar las medias queries "standar" para adaptar mi sitio a diferentes resoluciones no toma las que a mi ver deberia de tomar, por ejemplo tengo esta
Código CSS :
/* ============================ All Smartphones in landscape and portrait============================ */
/* ============================ creo que esta ni se cumple============================ */
media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#bgheadmenu{
background: url("../img/bgheader1.jpg") repeat scroll 0 0;
max-width: 65% !important;
}
}
/* ============================ All Smartphones in landscape ============================ */
/* ==========================se supone que va desde 321px hasta aprox 479px======================= */
/* ============================ pero en realidad 321px hasta 1224 ============================ */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
#bgheadmenu{
background: url("../img/bgheader2.jpg") repeat scroll 0 0;
max-width : 70% !important;
}
}
/* ============================ All Smartphones in portrait============================ */
/* ==========================se supone que va desde 242px hasta aprox 479px======================= */
/* ============================ si se cumple ============================ */
/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
#bgheadmenu{
background: url("../img/bgheader3.jpg") repeat scroll 0 0;
max-width: 50% !important;
}
} El detalle que por ejemplo la media querie 2 se va muy desproporcionada, se supone que su maximo dada la primer regla de media queri es que hasta 480 pero no, se pasa hasta el tamaño que tengo definido para las laptop (tengo definido que el minimo para que actue es 1224), ademas la primer regla no veo que se aplique.
Alguna idea.
les dejo todas las media queries que uso por el momento.
http://code-tricks.com/css-media-queries-for-common-devices/
Saludos.
