vue移动端适配(postcss-pxtorem和amfe-flexible)

一、移动端适配(postcss-pxtorem和amfe-flexible)
在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配)
实现思路:①通过postcss-pxtorem实现将px转成rem,②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件,我们就可以实用设计稿的px来进行开发了。
1.安装postcss-pxtorem和amfe-flexible
Npm install postcss-pxtorem --save-dev
Npm install amfe-flexible --save
2.在vue的main.js中引入amfe-flexible
import ‘amfe-flexible’;
3.在.postcssrc.js中配置,vue-cli3.0的版本在postcss.config.js中配置

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

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

你可能感兴趣的:(vue,web前端,前端)