h5 移动端 字体行高偏上问题

Posted 2020-08-17 riven.lcs

才发现 移动端项目怎么会有那么多问题呢？

现在不用搞ie的hack兼容问题了

又来了h5的兼容

 

哎，问题还是得解决啊

言归正传

 

问题：移动端h5页面，文本行高偏上的问题，（据说ios手机没有），咱也没ios手机，咱也不敢问啊，有的大佬试试

当我们使用rem，em，作适配时，字体可能出现奇数，带小数点的，字体大小，当字体大小小于12px时，安卓手机为避免奇数字体带来的偏差会自动设置成偶数

 

 

网上有很多说法，

比如，

用flex布局设计 设置 align-items: center 的

 

设置行高为 

line-height: normal;
vertical-align: middle;
使用padding撑开的

 

反正我是没生效，不知道大佬们生效了没有

 

 

经过测试，可行的方法，我的是小米手机（我发誓我是爱国的，下一部就买华为）

 

方法一：

改变字体大小，使其大于等于12px

将模块整体放大一倍，再使用 transform: scale(0.5); transform-origin: 0% 0%; 缩小为正常

方法二：

使用自适应表格布局 - - table布局

注意将外层容器设置脱离文档流 ，使用绝对定位，flex，浮动啊，都可以，看你喜欢

display: table-cell;

vertical-align: middle;

text-align: center;

 

 

收获测试崇拜值一枚