css - query - ¿Está Chrome redondeando las unidades de consulta de medios en mal?

responsive design ejemplos

Question

He configurado los puntos de interrupción de consulta de medios de la siguiente manera:

@media screen and (max-width:48em){
    /* phone */
}
@media screen and (min-width:48.063em){
    /* tablet*/
}

Obtuve el valor 48.063em de alguna calculadora PX a EM (me dijeron que usara em-units por alguna razón, pero eso está fuera de esta pregunta), y está funcionando bien en firefox, pero en Chrome, parece que ese navegador el ancho de 769px cae ENTRE esos valores de ancho máximo / mínimo y ninguno de los dos se aplica a la página. Sé que esto puede solucionarse estableciendo ese min-width en 48.01em, no te preocupes por eso. También he visto 48.063em utilizado en algunos tutoriales.

¿Alguien puede confirmar si esto es un error en Chrome, o un error en mi lógica?

Answer 1

He tenido este problema exacto y creo que tiene razón en que su ancho está cayendo entre los valores especificados y, por lo tanto, no se aplica ningún estilo. Creo que la solución es eliminar la consulta de medios de tu teléfono y simplemente tener los estilos de teléfono en el nivel superior, así:

/* phone styles */

@media screen and (min-width:48.063em){
    /* tablet styles */
}

En este caso, los estilos de su teléfono se aplicarán a menos que el ancho sea de 48.063em o superior, en cuyo caso los estilos de teléfono serán anulados por otros similares en la consulta de medios (primer diseño móvil). De esta forma solo tienes un único punto de corte. Puede extender esto a dispositivos más grandes de la misma manera:

@media screen and (min-width:100em){
    /* even larger styles */
}

Si miras el CSS for Foundation , verás este enfoque, que fue lo que me ayudó a resolverlo. Por qué el código original parece funcionar en navegadores distintos de Chrome, no lo sé.