vue 自动px单位自动转换rem

最新推荐文章于 2024-06-26 11:01:04 发布

weixin_34111790

最新推荐文章于 2024-06-26 11:01:04 发布

阅读量199

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xiechuanghong/p/10855572.html

版权

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

最后测试下。。

测试没问题

转载于:https://www.cnblogs.com/xiechuanghong/p/10855572.html

关注