H5移動端屏幕自適應原理

根節點字體大小 RFS,屏幕寬度 SW,瀏覽器默認字體大小DFS,對html font-size的縮放比rate = RFS/DFS,使用的長度a rem = p / RFS rem。選擇一個標準:iPhone6,SW0=375px,RFS0設爲50px。

自適應原理,內容隨屏幕寬度進行變換。即當SW變換時,通過改變rate, 讓 p進行變換,而a不變。SW1 / SW0 = p1 / p0 = (a * RFS1) / (a * RFS0) = RFS1 / RFS0 = rate1 / rate0。

一般直接給html的font-size設個百分數rate1 = SW1 / SW0 * rate0 = SW1 / SW0 * RFS0 / DFS. (DFS是無法改變的)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章