Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/07/2016, 08:46
Rebuilding
 
Fecha de Ingreso: julio-2014
Mensajes: 161
Antigüedad: 10 años
Puntos: 4
chrome no detecta @media only screen and (min-device-width : 300px) and (max-device-w

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
  1. @media only screen and (min-device-width : 300px) and (max-device-width : 600px) {
  2.         body{
  3.             width:300px;
  4.         }
  5.         .redonderecha{
  6.             position:absolute;
  7.         }
  8.         .CapaLogin{
  9.             position:absolute;
  10.             float:left;
  11.             margin-top:65px;
  12.         }
  13.         #AjaxCapaX{
  14.             float:left;
  15.             position:absolute;
  16.             margin-top:145px;
  17.         }
  18.     }
  19.     @media only screen and (min-device-width : 600px) and (max-device-width : 1300px) {
  20.         .redonderecha{
  21.             position:relative;
  22.             float:left;
  23.         }
  24.         .CapaLogin{
  25.             position:relative;
  26.             float:right;
  27.         }
  28.         #AjaxCapaX{
  29.             float:right;
  30.             position:relative;
  31.             margin-top:77px;
  32.         }
  33.     }
  34. .contienecabecera{ 
  35.     width:98%;
  36.     overflow:hidden;
  37. }
  38. .redonderecha{
  39.     display:inline-block;
  40.     height:70px;
  41.     width:300px;
  42. }
  43. .CapaLogin{
  44.     display:inline-block;
  45.     margin-left:0px;
  46.     min-width:290px;
  47. }

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