如何正确配置Vue.js移动端flexible.js并注意哪些关键事项？

本文共计881个文字，预计阅读时间需要4分钟。

前言：最近在用vue做移动端项目，网上找了一些移动端适配方案，个人觉得手淘团队的flexible.js还是比较容易上手的，在这里做下总结。

主体：flexible.js适配方案采用rem布局，根据屏幕分辨率设置根元素字体大小。

前言

最近在用vue做移动端项目，网上找了一些移动端适配的方案，个人觉得手淘团队flexible.js还是比较容易上手，在这里做下总结。

主体

flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size，从而达到每个元素宽高自动变化，适配不同屏幕

1.安装lib-flexible.js

npm install lib-flexible --save

1.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'

通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。