vue 自动px单位自动转换rem

那年仲夏 提交于 2020-08-13 09:03:50

vue 适配移动端 假设设计图是375

第一步 安装 lib-flexible

npm i lib-flexible --save


第二步 安装 px2rem-loader
  npm install px2rem-loader --save-dev

第三步 引入lib-flexible

  import 'lib-flexible/flexible'
 
第四步 最重要的一步 配置utils文件
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }
//在generateLoaders方法中添加px2remLoader
const loaders = [cssLoader,px2remLoader]

ps:npm的安装命令--save是将包装到package.json的dependencies     而--save-dev是将包装到package.json的devDependencies中

第一个相当于是安装插件 第二个是安装依赖包

 

注意!!:如果是750的设计图需要将第四步的remUnit替换成750 这样生成出来的比例就是1rem=100px

最后测试下。。

测试没问题

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!