Cómo orientar un dispositivo con un dppx mayor que 2 pero inferior a 3

Estoy tratando de aplicar algunas reglas css para dispositivos con una relación de píxeles 2dppx y algunos otros para dispositivos con 3dppx o superior.

Como solo estoy apuntando a dispositivos pequeños (móviles y tabletas, pero sin computadoras portátiles de retina o televisores), tengo una consulta de medios de ancho máximo que rodea a los otros dos. (editado: eliminar esta consulta de medios no soluciona el problema).

@media only screen and (max-width: 40em) { @media screen and (min-device-pixel-ratio: 2dppx) and (max-device-pixel-ratio: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-device-pixel-ratio: 3dppx) { $base-font-size: 180%; } } 

Pero cuando ejecuto la web en mi iPhone 5s (con un 2dppx), puedo ver el base-font-size es igual al 180%, por lo que parece que está tomando los estilos equivocados. ¿Por que es esto entonces?

Ok parece que el problema no puede estar en las consultas de medios en sí, sino en el hecho de que no es posible actualizar variables Sass dentro de las consultas de medios , como se indica en esta otra pregunta Stackoverflow .

De la respuesta aceptada, cito "Esto simplemente no es posible, ya que la pantalla trigger @media y (max-width: 1170px) ocurre en el lado del cliente".

Así que voy a tratar de volver a escribir mi código para evitar el cambio de variables dentro de las consultas de medios.

Puedo estar completamente equivocado aquí, pero no creo que dppx usar dppx con min-device-pixel-ratio , debes escribirlo como:

 @media only screen and (max-width: 40em) { @media screen and (min-device-pixel-ratio: 2) and (max-device-pixel-ratio: 2.9){ $base-font-size: 150%; } @media screen and (min-device-pixel-ratio: 3) { $base-font-size: 180%; } } 

Alternativamente, para ser más explícito, intente usar la propiedad de resolution :

 @media only screen and (max-width: 40em) { @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-resolution: 3dppx) { $base-font-size: 180%; } } 

EDIT: es posible que tenga que añadir un prefijo de proveedor como se indica a continuación:

 @media only screen and (max-width: 40em) { @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx), screen and (-webkit-min-resolution: 2dppx) and (-webkit-max-resolution: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-resolution: 3dppx), screen and (-webkit-min-resolution: 3dppx) { $base-font-size: 180%; } } 

En lugar de utilizar la relación min-device-pixel-ratio , intente usar min-resolution .

 @media only screen and (max-width: 40em) { @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){ $base-font-size: 150%; } @media screen and (min-resolution: 3dppx) { $base-font-size: 180%; } } 

Vea la sección de resoution aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.