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是无法改变的)

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