在VUE中使用REM布局【结合postcss-pxtorem和amfe-flexible实现移动端适配】

在VUE中使用REM布局

这里是的实现思路是① 通过postcss-pxtorem 实现将px 转成rem。② 使用 amfe-flexible 插件进行 HTML 根节点的初始化。配置完这个两个插件,我们就可以优雅的使用设计稿的px来进行开发啦。具体步骤如下:

步骤:

1. 安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

2. 安装 amfe-flexible

npm install amfe-flexible --save

3. 在Vue 的main.js中引入amfe-flexible

import  'amfe-flexible';

4. 在.postcssrc.js 中配置,vue-cli3.0 的版本在postcss.config.js中配置。

在VUE中使用REM布局【结合postcss-pxtorem和amfe-flexible实现移动端适配】_第1张图片

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

基本配置就完成了,是不是很简单, rootValue 这个值可以自己配置,如果你设计稿的长度是750基数的可以将rootValue的值修改为75。

你可能感兴趣的:(Vue实战)