移动端适配的rem最佳方案

2018-11-26  本文已影响0人  月下吴刚_c8c7

rem方案有好几种方式,下面这种是相对较好的一种

思路步骤

  1. 以设计稿宽度为750为例;
  2. 根据实际屏幕宽度动态修改 html 的 font-size 大小为 : 当前设备宽度/设计稿宽度 * 100 px,如屏幕宽度为375,则新的 font-size 为 375/750*100 px ;(100是为了方便计算)
  3. 页面中所有元素的高宽都以rem表示,包括字体,比如设计稿上的 240px * 360px 就写成 2.4rem * 3.6rem , 设计稿上32px的字体大小写成 .32rem;
  4. 当屏幕宽度为375时,实际的 rem 就为 50px ,字体大小就为16px ,实现了100% 还原 ;
  5. 当屏幕宽度大于设计稿宽度时,将 fontsize就定为 100px ,页面 水平居中。

以上方案就是REM等比缩放响应式布局,是目前单独做移动端项目实现移动端适配的最佳方案(细节处理上可能会用到flex或@media)

上一篇下一篇

猜你喜欢

热点阅读