Hola
Uso estas reglas en firefox y safari y trabajan perfectamente, pero en chrome, opera e IE, y no me las detecta, lo curioso es que entro a vista de diseño adaptable en chrome y si me lo detecta, pero en el navegador como tal el chrome y opera, no me lo lee
Lo que intento es tener una capa contenedora con overflow: hidden y adentro una capa con float left y otra float right, cuando la resolución es baja, la capa que era float: right se convierte en float: left, yo lo puedo resolver con una capa entre las dos capa, que use un widht:12%; y un min-width:0px y que sea display: inline-block, pero la capa de la derecha aun no se posiciona tan bien como lo hace en firefox, ademas que es una solución que a lo mejor es un tanto tonta y empirica, no se ustedes que opinan
Código CSS:
Ver original@media only screen and (min-device-width : 300px) and (max-device-width : 600px) {
body{
width:300px;
}
.redonderecha{
position:absolute;
}
.CapaLogin{
position:absolute;
float:left;
margin-top:65px;
}
#AjaxCapaX{
float:left;
position:absolute;
margin-top:145px;
}
}
@media only screen and (min-device-width : 600px) and (max-device-width : 1300px) {
.redonderecha{
position:relative;
float:left;
}
.CapaLogin{
position:relative;
float:right;
}
#AjaxCapaX{
float:right;
position:relative;
margin-top:77px;
}
}
.contienecabecera{
width:98%;
overflow:hidden;
}
.redonderecha{
display:inline-block;
height:70px;
width:300px;
}
.CapaLogin{
display:inline-block;
margin-left:0px;
min-width:290px;
}
No puse todo, para no perdernos entre tanto css, pero chrome no lo detecta
y la W3C, dice que si es valido
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp