响应式布局之REM

    REM是实现响应式布局的方案之一,除了REM之外,还有VM、REM+VM,今天主要来记录一下REM的实操,

一、安装插件

npm install lib-flexible
npm install postcss-plugin-px2rem -D

 二、在main.js引入

import 'lib-flexible/flexible.js'

   在vue.config.js中配置

css:{
  loaderOptions:{
    postcss:{
      plugins:[
        require('postcss-plugin-px2rem)({
           rootValue:37.5,  //设计稿的宽/10
           exclude:/(node_module)/,
           minPixeValue:3 //只对3倍图及3倍图以上的才生效
        })
      ]
    }
  }
}

这样,就可以放心的使用 px 啦 

 

你可能感兴趣的:(移动端,vue.js,前端,javascript)