vue2.0移动端适配 rem布局

下载两个插件

命令

npm i lib-flexible -S  根据移动端屏幕大小而对应改变html的fontSize
npm i postcss-pxtorem@5.1.1 -D  根据html的fontSize将px单位改变为rem单位

项目中创建postcss.config.js用来配置postcss-pxtorem插件

注意是js文件

 

 文件中复制以下内容

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue:75,
      propList:['*'],
      exclude: /(node_modules)|(folder_name)/i
    }
  }
}

 修改lib-flexible源代码，让其调整的最大宽度为750px

大约68行

 

在main.js中引用lib-flexible，并设置文字为px单位

import 'lib-flexible'

在index.html中注释掉meta