vue 移动端H5 布局 rem（postcss-px2rem）

vue 移动端H5 布局 rem（postcss-px2rem）

引入两个包

1. lib-flexible

lib-flexible 会自动在为你添加 meta name=“viewport” 的标签
同时会自动设置html的 font-size 为屏幕宽度除以10，也就是 1rem 等于html根节点的 font-size。
假如设计稿的宽度是375px，此时1rem应该等于37.5px。
假如设计稿的宽度是750px，此时1rem应该等于75px

2. postcss-px2rem

postcss-px2rem会将你代码中的px转换为rem

使用方法：

1、安装 flexible和 postcss-px2rem（命令行安装）

npm install lib-flexible--save npm install postcss-px2rem--save

2、在项目入口文件main.js 中引入lib-flexible

import'lib-flexible'

由于 flexible 会动态给页面 header 中添加 标签，所以务必请把目录 public/index.html 中的这个标签删除

3、配置 postcss-px2rem

修改vue.config.js（vue-cli3 构建的项目比以前的精简许多，如果没有请在根目录新建

module.exports={css:{loaderOptions:{css:{},postcss:{plugins:[require('postcss-px2rem')({remUnit:75})]}}}}

4、重启项目