chrome no detecta @media only screen and (min-device-width : 300px) and (max-device-w

[Rebuilding]

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:

@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

[Rebuilding]

En lugar de hacerle asi

Código CSS:

@media only screen and (min-device-width : 300px) and (max-device-width : 600px) {
 

le estoy haciendo asi

Código CSS:

@media (min-width : 300px) and (max-width : 600px) {
 

Ya funciona en Internet Explorer, Microsoft Edge, Firefox, Opera, Safari

Pero en CHROME no funciona, que sera? en chrome solo funciona en la vista de diseño adaptable

[IsaBelM]

Revisa esto https://developer.mozilla.org/es/doc..._queries#width y https://developer.mozilla.org/es/doc...on_Navegadores