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;

 

 

收獲測試崇拜值一枚
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM