浅谈rem单位对line-height的影响

    现在rem单位在移动端用的比较多,但是这有个致命的缺陷,就是对line-height极其不友好,特别是在安卓手机上,在苹果和iPad上还好一点,当然,也有字体的影响,每种字体的line-height在页面上呈现不一样,在某度上找了很久,好像现在还没有彻底出解决的办法,大致有两种方法可以稍微平衡一点

1.先设置line-height:1

    对,你没有看错 是1;后面没有单位,然后上下用padding撑开,如果数字比较小的话,尽量用px,不用rem,比如边框为1px,就写1px,不要写1px换算成rem后的大小,比如: 设计图是750px的,然后边框是1px,1px在750的尺寸下换算成rem的话,就是0.013333rem,一般保留6位小数,这个根据自己的意愿写,大致的意思就是这样,0.013333rem在每个手机上的解析可能不同,所以在每个手机上的显示不同,但是有人问了,rem本来就是适应不同的手机,这有啥稀奇的。但是你们没想到一个问题,本人在写移动端的时候,就经常遇到这种问题,就是0.013333rem有的手机解析正常,但是有的手机直接解析成0了,就是边框没有了,这就尴尬了,所以强烈建议写1px。

    有人提出写line-height: normal;然后在用padding撑开,经本人测试,line-height: normal;这个好像不管用。

2.第二种办法就是先整体放大一本,然后在整体缩小一倍。(理论上是成立的,但是小编没测出来,而且位置及其不容易控制,建议不用)

发表评论:

评论记录:

还没有评论,快来抢沙发吧~~
没有账号?马上注册
已有账号?