h5 移動端 字體行高偏上問題

才發現 移動端項目怎麼會有那麼多問題呢？

如今不用搞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;

 

 

收穫測試崇拜值一枚