移动端字体垂直居中偏上问题详解

详解"/>

移动端字体垂直居中偏上问题详解

相信对于广大前端程序员来说，一定曾经被这个问题giao住过。
那就是——移动端字体垂直居中偏上。
今天就来谈一下这个问题以及解决方法。

产生原因

1. 移动端开发，为了更好的适配，大家都会采用em或者rem来进行开发。
2. 在进行适配的换算时，编译器会将em或者rem自动换算成px来显示。
3. 这时就会出现问题，因为换算精度不足，换算成的px会出现小数点问题，
4. 如果出现小数点的话，系统会自动进行四舍五入的取整运算。
5. 取整之后就会出现居中的字体偏上问题了。
6. 既然找到了原因，那么解决起来就有思路了，

解决方法

1.flex缩放

直接使用f’lex进行一次内容的缩小和放大，从而使得转换的px相同。

2.table-cell取整

既然是因为转换出现小数点，那么display使用table-cell，进行取整。

3.transform：scale(.5)

同样也是缩放。

4.margin-top和定位联合使用

这是下下策，前三种方法都不行的话，可以这样强行定位。

5.px

问题在于rem转换，那么直接不用rem，换成px就可以避免这个问题，但是移动端px开发的弊端肯定就出现了，