flexble css,移动端自适应flexible.js(精简版)

从事前端开发已差不多有两年的时间了, 在这里给大家分享下我个人觉得简单好用的移动端尺寸自适应的一个方法, 希望能帮到大家

第一步:  引入js文件

在你的项目中引入适配库,推荐大家通过CDN引用它, 当然也可以下载到本地,建议对于js做内联处理，在所有资源加载之前执行这个js。

第二步: 把设计稿中的px转化为rem

工作中我们常见的视觉稿大小大至可为640、750、1125三种。不过flexible.js并没有限制只能用这三种，所以你还可以根据自身情况来调整，具体如何转换，我们以视觉稿为750px的宽来举例子，把750px分为100份，每一份称为一个单位a，那么每个a就是7.5px，而1rem单位被认定为10a，此时，1rem=1(a)X10X7.5(px)即75px。例如一个100px * 100px的div, 转换后是1.33333rem * 1.33333rem

但在实际开发中, 我们自己计算效率肯定是大打折扣,着这里我们可以借助一个工具cssrem. 我用的是vscode开发工具(轻量级简单好用), 下载cssrem插件,然后在设置里面找到cssrem.rootFontSize, 把数值设为75(一般情况下移动端设计稿默认是750, 1rem就是75px, 大家可以根据设计稿尺寸自行调整). 到这为止我们的准备工作就做完了, 下面就是在页面中用rem来代替px

第三步:  页面中用rem来替代px

在css样式中, 我们还像平时一样输入px, 会自动出来转换后的rem, 到这里就大功告成了, 快来试一试吧!