- 背景：用了rem的适配方案，但是写出来样式总是有点问题。
实现css代码如下：
font-size:0.26rem;
line-height:0.26rem;
padding:0.08rem;
具体表现见下图：
在安卓机上文字整体偏上
因为假设设备的可视视窗的宽度是375px，那么html上的font-size会是37.5px。那0.26rem计算出来是小于12px的。
一般的移动端设备的webview都会给默认设置一个最小line-height，如果我们设置的line-height小于webview预设最小line-height的时候，会忽略我们写的line-height而按照设备预设值进行渲染，这就是为什么，我们明明设置了一个line-height，然而最后渲染出来的效果并不是想象中的样子。
解决方案有二：
- 和设计师协商设计规范，在不同dpr下用不一样大小的固定字号。
比如dpr等于1的时候，字号用12px。dpr等于2的时候，字号用24px。
那我们将代码写为：
font-size:12px;
line-height:1;
- 用rem计算字号大小，但是保证计算出来一定是大于12px的。然后用transform-scale进行缩小至你需要的大小。
- 但是我更倾向使用固定大小，因为不同机型对小数的敏感度是不一样的。这也可能导致一定的渲染误差。
网友评论