作者:乐在hhh其中 | 来源:互联网 | 2023-05-18 17:43
一般在pc中我们不论用rem或者px,都可以使文字很好的垂直或水平居中。但是在移动端中,文字的垂直居中会出现差异。本文主要测试的手机是Android,因为ios对于px和rem变现都
一般在pc中我们不论用rem或者px,都可以使文字很好的垂直或水平居中。
但是在移动端中,文字的垂直居中会出现差异。
本文主要测试的手机是Android,因为ios对于px和rem变现都比较好,所以不做测试。
首先我们使用rem来测试,在此已经清除所有默认样式,并且设定行高和父框高度都是1.2rem。仅改变文字的大小。
pc中效果:
可以看到pc中rem表现良好。
Android手机中:
android手机中可以看到文字有明显的上移。
然后我们用px来进行测试,去除所有默认样式,元素高度、行高都是20px,仅改变文字大小。
在pc端:
发现文字有点偏下
在Android浏览器上:
发现跟pc一样,有点偏下,但是比rem感觉好多了。
不过由于移动端的特殊性,我们需要根据屏幕实际的宽度来计算文字的大小,所以就必须使用rem,那么如果使用rem,如何使文字垂直居中呢。
1、利用table-cell表格属性:
table
在pc上,十分完美。但是在Android机上:可以看到差的有点远了。
2、利用缩放:
在pc上:完美。在Android上:,居然也不错,如果父框高于字体高度的话,则完全看不出来,但是缺点是元素会占缩放前的空间,所以要使用的话还是加上定位吧。
3、用flex
在pc上完美。
在Android上:,也比较完美,如果父框高于字体高度的话,则完全看不出来。
综上所述,rem在移动端垂直居中最好的方法就是缩放和flex弹性盒子了。