Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de chrome no detecta @media only screen and (min-device-width : 300px) and (max-device-w en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/07/2016, 08:46
 
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
  #2 (permalink)  
Antiguo 07/07/2016, 09:16
 
Fecha de Ingreso: julio-2014
Mensajes: 161
Antigüedad: 10 años
Puntos: 4
Respuesta: chrome no detecta @media only screen and (min-device-width : 300px) and (m

En lugar de hacerle asi

Código CSS:
Ver original
  1. @media only screen and (min-device-width : 300px) and (max-device-width : 600px) {

le estoy haciendo asi

Código CSS:
Ver original
  1. @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
  #3 (permalink)  
Antiguo 07/07/2016, 13:27
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 1 mes
Puntos: 1012
Respuesta: chrome no detecta @media only screen and (min-device-width : 300px) and (m

Revisa esto https://developer.mozilla.org/es/doc..._queries#width y https://developer.mozilla.org/es/doc...on_Navegadores
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: chrome, detecta, diseño, media, screen, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:52.