这是鼠年来的第一篇文章！
也是刚开始远程上班，强制度假后拿到的第一个任务是完成微信公众号手机端项目的开发！
话不多说，vue走起来！

一、安装lib-flexible插件

【lib-flexible】移动端弹性布局适配解决方案。用于设置rem的基准值，插件会自动对html根元素进行font-size的设定，默认会设置成屏幕宽度的十分之一。
打个比方：如果当前屏幕的宽度是1920px，它就会自动给html标签加上font-size: 192px的样式。这个时候，1rem也就等于192px。
1.安装：

npm i -S amfe-flexible

2.在index.html的头部加入手机端适配的meta代码（vue-cli3搭建的项目，该文件在public目录下）：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

3.引入，以下方法二选一：

// 在main.js文件中直接引入（该文件在src目录下）
import 'amfe-flexible/index.js';

// 或者在index.html文件中加入此标签
<script src="./node_modules/amfe-flexible/index.js"></script>

二、安装postcss-pxtorem插件

【postcss-pxtorem】一款postcss插件。用于将单位转化为rem，代码中写入的px单位会根据设置好的基准值，以px大小除以基准值，自动转成rem显示在浏览器上。
打个比方：如果基准值为75（1个rem等于75px），对元素设置宽度为750px，该插件就会自动将这个元素宽度转换成10rem。
1.安装：

npm install postcss-pxtorem --save-dev

2.（适用于vue-cli3）在根目录下找到vue.config.js，写入以下代码。若没有该文件请自行创建：

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 75, // 换算的基数(将宽度为750px的设计稿分成10等份，每份也就是75px，也就是1rem=75px)
                        propList: ['*'],
                        // selectorBlackList: [
                        //     "van-",
                        //     "weui"
                        // ],
                        // 以"van-"和"weui"开头的样式不会自动进行rem转换
                    })
                ]
            }
        }
    }
};

执行完了上面的操作之后，你就可以毫不犹豫的写满px了，他们都会在编译时自动转换成rem单位！！！

重点在这，圈起来要考！

你觉得下面的网页哪个好看些？

图2一定是首选！
所以为了让做出来的页面在PC端也能友好一点，
就应该给页面设置一个最大宽度！

// main.js中写入
// REM适配：设置HTML里font-size的大小
function setRem () {
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = (htmlWidth / 10) > 75 ? "75px" : htmlWidth / 10 + 'px'; // 设置1rem最大不超过75px
    // htmlDom.style.fontSize = htmlWidth / 10 + 'px'; // 原先1rem等于屏幕宽度除以10
}
setRem(); // 初始化
window.onresize = function () {
    setRem();
}

/* 对最大的父级容器设置样式，一般可能是App.vue文件中的#app */
#app {
    max-width: 750px; /* 插件会自动解析成10rem */
    margin: 0 auto;
}