android - REM 单元在 Android 2.* 和 Web View(直到 Android 4.2) native 浏览器中效果不佳

Question

这是我搜索了很长时间的错误，但一无所获。

在我正在进行的一个元素中，我开始使用 REM 单位。在每个有文本的元素中，我都给出了字体大小和行高。

我不知道为什么，但不知何故它不理解 REM 的行高，并且表现得就像没有 REM 一样。

html{
  font-size:1px;
}

.fu{
  font-size:20rem;
  line-height:24rem;/*old android, act like 24 without the REM Unit*/
}
/*normal browser - line-height 24*1 = 24px(root-font-size)
old android browser and webview line-height 24 * 20(font-size) = 480px*/

LIVE EXAMPLE (在桌面和旧 android 上观看)

我很高兴有一个合适的解决方案，使我能够在行高中使用 REM 单位。

Answer 1

你不能在 android 2 中使用 rem line-height *

解决方案:

使用字体大小的倍数

示例

html{
  font-size:1px;
}

.fu{
  font-size:20rem;
  line-height:1.2; /*1.2 equal to 24rem(in this case) and will resolve conflict in old android*/
}