Vue项目rem适配

一枕黄粱-web

于 2019-05-23 14:13:23 发布

阅读量552

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： rem适配

本文链接：https://blog.youkuaiyun.com/jstljspservlet/article/details/90479528

vue 专栏收录该内容

15 篇文章

订阅专栏

博客介绍了Vue项目中rem适配的操作步骤。首先需安装lib-flexible和postcss-pxtorem依赖，接着要在vue-loader.conf.js、.postcssrc.js文件的module.exports中添加相应代码，最后在入口文件main.js中引入lib-flexible。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装依赖
npm install lib-flexible
npm install postcss-pxtorem

2.在vue-loader.conf.js文件module.exports中加入以下代码

 css: {
       loaderOptions: {
           postcss: {
               plugins: [
                   require('postcss-pxtorem')({ // 把px单位换算成rem单位
                       rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
                       selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                       propList: ['*']
                   })
               ]
           }
       }
   }

3.在.postcssrc.js文件module.exports中加入以下代码

"plugins": {
    "postcss-import": {},
      "postcss-url": {},
      // to edit target browsers: use "browserslist" field in package.json
      "autoprefixer": {},
      "postcss-pxtorem": { // 此处为添加部分
          rootValue: 37.5, // 对应16px 适配移动端750px宽度
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0
      }
  }

4.在入口文件main.js文件引入 import ‘lib-flexible’