文章

移动端android上line-height不居中的问题

隐藏侧边栏 文章2017-03-143,671 人已阅来源:TONJAY-原创

作为一个强迫症患者,估计你应该是哭着找到这篇文章的。没办法,正常的写法,目前安卓上line-height属性就是不居中。很多你感觉非常居中的按钮,那些都是较大的按钮,略微有个两三像素的差距是看不出来的。你若不信,可以截图下,在ps里量一下就明白了。

下面可以先看看两张图(可以右键在新标签中打开大图):

左图中的字号是12px,右图中的行高是26px。

仔细观察过上图后,闲话少扯,直接说说我对这个android上line-height问题的一些看法:

  1. 字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
  2. 尽量不要使用rem或者em的单位,除非你能对字号的把握在每个手机上都能达到第1条的要求。别外,微信小程序上的rpx是动态计算的,可以单独针对这部分使用px。
  3. 一般只要不是边框贴着文字,一般都还看得过去,在接受的范围之内。如果是边框贴着文字,就是居中了,也不好看啊。

那么,对于小于12像素的居中或者是对居中要求很是严格的需求,这个问题怎么解决?

  1. 把字号内外边距等设置为需求大小的2倍,使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放,如果是父级自适应高度且可展示多行的,使用transform是有问题的。因为transform缩放是不影响页面布局的。
  2. 把字号内外边距等设置为需求大小的2倍,使用zoom进行缩放,可以完美解决。zoom原本只有ie支持,但现在除了Firefox,都已经支持了。是的,Firefox不支持。

网上也这样的解决方法:把line-height设置为0,使用padding值把元素撑开,说是可以完美解决。

经过测试,没有用的!

另外,给大这看一下我在项目中实现的效果,基本可以完全接受(font-size:12px; line-height:24px;):

此文为Tonjay原创,转载保留相关信息。

TONJAY

因如今网盘的各种你懂的原因,如果下载链接不可用。请加入QQ群,在群文件里进行下载,群文件找不到向群主反馈。
如果有任何问题也可以加入群中,一块讨论学习。