移动端H5通过flexible.js+rem自适应适配方案

一、 rem实际开发适配方案

  • (1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小;
  • (2)css中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值;
技术方案1 技术方案2
媒体查询 flexible.js
rem rem
less vscode插件cssrem

总结:两种方案都可以,一般推荐第二种方案,更简单操作

二、简洁高效的rem配方案flexible.js

原理

手机淘宝团队出的简洁高效移动端适配库
它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以
里面页面元素rem值:页面元素的px值/ 75
剩余的,让flexible.js来去算

页面元素大小取值方法

①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数))
②屏幕宽度/划分的份数就是html的 font-size的大小
③或者:页面元素的rem值=页面元素值(px) / html font-size字体大小

三、使用步骤

技术选型案例
  • 方案:我们采取单独制作移动页面方案·
  • 技术:布局采取rem适配布局 ( flexible.js + rem )
  • 设计图:本设计图采用750px设计尺寸
1.下载flexible.js

github下载地址: HTTPs://github.com/amfe/lib-flexible

index.js中原理是把当前设备划分为10等份

2.设置meta标签

3.引入flexible.js

4.初始化style

这样就完成了,然后就可以根据750的设计稿进行在移动端开发了
同样要是640的设计稿,则要设置html根字体cssroot为64

5.辅助工具

VSCode px转rem插件 cssrem;

移动端H5通过flexible.js+rem自适应适配方案
image.png
  • 作用:编写代码时自动根据写的px单位计算出等于多少rem
  • 注意: cssrem默认的html字体大小cssroot为16px ,因此要修改为此时的75px;
  • 修改方法:在vscode设置中查找cssroot,设置为75,设置完成后重新启动vscode就可以了;
    具体可以查看此插件VSCode cssrem插件

五、flexible.js源代码

未经允许不得转载:一点博客-青梅煮码-共享博客 » 移动端H5通过flexible.js+rem自适应适配方案
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏