移动端适配有很多种方案，如flex布局，百分比布局，响应式布局，vw布局；我个人比较喜欢的是rem和vw，当然最喜欢的是rem适配方案，因为它的兼容性更佳！
参考：https://blog.csdn.net/weixin_41967475/article/details/109339844
在进入正文之前，先简单了解一下什么是手机适配？什么是rem?什么是vw？
1.什么是手机适配？
答：设计狮制作效果图，程序猿把效果图应用到不同的手机，对不同的屏幕进行界面调整的过程，确保界面不变形，呈现效果图的位置、尺寸、比例。
2.什么是rem?
答：rem是CSS3新增的一个相对单位，它相对根节点< html >字体的大小。rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
3.什么是vw?
答：vw是viewpoint width的简称，即视窗宽度，1vw相当于视窗宽度的1%,100vw相当于视窗宽度的100%。
1.先用vue-cli 手动快速构建一个前端项目
参考： vue-cli 3.0手动创建项目
2.在项目中index.html的头部标签加入下面这句话，让不同设备的浏览器的视口取最佳CSS像素
3.分别安装 postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url一系列插件
注：最好指定版本号安装
4.在项目根目录下添加 .postcssrc.js 文件
5.动态设置根字体大小
在项目中index.html的头部添加下面这段js代码：
注：因为设计狮制作的效果图常为750px，为了方便直接读取UI标好的像素大小，根目录的字体大小就设置为32px;
vw是相对屏幕的百分比，所以我们不用再去动态的改变根字体大小了，只需要把设计狮制作的效果图的px大小转换成对应的vw值就完了。
1vw表示1%的屏幕宽度， 即屏幕宽度被分为100份vw
如：750px 设计稿 = 100vw ，1vw = 7.5px
1.先用vue-cli 手动快速构建一个前端项目
参考： vue-cli 3.0手动创建项目
