He estado destrozando mi cerebro sobre esto, las búsquedas en Google realmente no tienen mucha ayuda o documentación sobre este problema, pero está afectando en gran medida mi conversión actual a un diseño optimizado para dispositivos móviles.

Donde quiera que vaya, todos están haciendo alarde de usarrembasados en diseños como el nuevo estándar de oro, y en la superficie las virtudes de este enfoque parecen ideales (soporte de accesibilidad total para la escala basada en píxeles de referencia y el tamaño de fuente para admitir muchos DPI y muchos tamaños / configuraciones de pantalla).

Sin embargo, me he encontrado con un inconveniente bastante grande, estoy descubriendo que Chrome (y posiblemente todos los navegadores webkit pero no tengo un cajero automático para probar)no parece escalar lo mismo que el resto.

Con la configuración inicial como esta:

html { font-size: 62.5%; }
body { font-size: 1.6rem; }

Deberíamos poder configurar todas nuestras mediciones usando 1/10 del tamaño de píxel en rems:

.my-element { height: 15rem; } /* 150px */

He creado un ejemplo simple que ilustra mi problema aquí:https://jsfiddle.net/gLkpz88q/2/embedded/result/

Cuando use Chrome y escale de esta manera, observe cómo el diseño deja de escalar pero el contenido continúa.

Compare esto con Firefox, IE11, Edge y no verá este comportamiento en absoluto, todos escalan de manera uniforme y continua.

Aquí está (arriba a la izquierda: Chrome, arriba a la derecha: IE11, abajo a la izquierda: borde, abajo a la derecha: Firefox) de lado a lado:

Como puede ver, esto tiene algunas implicaciones terribles para los diseños si elrem la unidad escala de manera diferente a todo lo demás.

No estoy seguro de cómo proceder con este escenario, ya que parece que WebKit / Chrome ha decidido manejar la escala de manera completamente diferente y esto llama a cuestionar todos los escenarios de escala en el futuro.

Hay una serie de artículos que defienden el uso de píxeles comoPíxel de referencia CSS se ocupa bastante bien del escalado móvil:

Sin embargo, estos tienden a ignorar el problema del escalado de la fuente y lo citan como una situación poco probable.

Eché un vistazo rápido a los sitios grandes y amigables para dispositivos móviles que pude pensar de grandes y exitosas empresas y parece que la mayoría de ellos solo usan píxeles para todas sus necesidades de diseño. (Google, Facebook, Wordpress, Twitter, Bootstrap 3, [y en cierta medida Bootstrap 4],MDNyPlataforma Web)

¿Es Chrome el nuevo IE que rompe los estándares? ¿O estoy haciendo algo terriblemente mal? Estoy tentado de usar píxeles en este punto para mantener la coherencia.