移动端适配的rem最佳方案
2018-11-26 本文已影响0人
月下吴刚_c8c7
rem方案有好几种方式,下面这种是相对较好的一种
思路步骤
- 以设计稿宽度为750为例;
- 根据实际屏幕宽度动态修改 html 的 font-size 大小为 : 当前设备宽度/设计稿宽度 * 100 px,如屏幕宽度为375,则新的 font-size 为 375/750*100 px ;(100是为了方便计算)
- 页面中所有元素的高宽都以rem表示,包括字体,比如设计稿上的 240px * 360px 就写成 2.4rem * 3.6rem , 设计稿上32px的字体大小写成 .32rem;
- 当屏幕宽度为375时,实际的 rem 就为 50px ,字体大小就为16px ,实现了100% 还原 ;
- 当屏幕宽度大于设计稿宽度时,将 fontsize就定为 100px ,页面 水平居中。