vue实现rem布局

//安装flexible
npm i lib-flexible --save-dev

//在main.js中导入
import 'lib-flexible'

     

①在flexible.js修改适合你的布局。

例如我把屏幕的宽度分为130份(这里要根据你的设计稿来设置）假设现在的设计稿宽度为1950px,那么rem = 1950/130=15px

②下载px2rem-loader插件

将1rem设置对应为上面计算的15px，重启下vscode就可以了

。

原理：flexble将你的页面分成多个等分，等份的个数你也可以自己设置。1rem(动态变化)=页面宽度 (动态变化) / 等分个数(固定) 

页面宽度变化，元素中rem的数值是不变的，变的只是单位rem相对应的px值。