vue中rem实现自适应

启航

基于现有的项目都需要做自适应适配多端了，在此需要知道如何实现自适应，这里带来rem适配方案已测试(ok)

安装插件并使用

借助插件将px转rem

• lib-flexible 用于设置 rem 基准值
• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

npm i -S amfe-flexible

安装完毕在main.js中引入

import 'amfe-flexible'; //引入rem自适应

在index.html中添加meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

再安装第二个插件

npm install postcss-pxtorem --save-dev

更改配置

• vue-cli2下，根目录中的 .postcss.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
    }
  }
}

• 在vue-cli3下,根目录中的 vue.config.js (没有，就新建一个)

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

这样写代码时会自动转换rem单位进行自适应布局,输入自己合适的大小即可!

这样就表示成功了✌