前言
最近在学习Vue的项目架构，查询了很多移动端样式适配，整合了一下我自己的适配方案做一个记录，可能不是最好的，但我自己用着还蛮顺手的~欢迎大家补充
一、字体篇——px2rem-loader
引言：
常规的字体大小使用px的话是写死的，那么rem由此诞生，根据html页面的根节点去计算相对大小，但是如此一来，如果是pc和移动端都适配的项目，那么我们在针对设计稿画ui的时候，px和rem的换算就异常痛苦了。
因此我选择引入了px2rem-loader组件，通过全局配置的方式让框架自己去计算rem和px的换算。
配置方法：
首先npm install px2rem-loader引个包
1、在vue.config.js中将loader引入使他在webpack打包的时候就加载，具体参数自己查一下吧解释起来有点多。
2、然后在你的全局样式的地方添加一个混入样式
这个文件中同样可以添加你需要的其他的全局样式函数之类的
3、在需要的地方引入
我们可以看到在使用px2rem函数后直接用px插件会帮我们转换成rem就很方便。
当然也有类似postcss-px2rem的插件功能相近，如果想全局注册的看我主页的全局变量使用，不过不是很推荐这么干，函数类的暂时不是很熟会碰到啥bug咱还不清楚，等研究明白了再补充
二、样式类——vue-breakpoint-component配合vuex
引言：
移动端适配常用的是amfe-flexible和postcss-pxtorem，可以做到样式宽度的重新计算。详情配置可以见下面这条帖子。
但是这样会出现一个问题，类似下面两张图，移动端和pc端的样式如果只是常规的压缩那未免也太丑了，如果需要两套样式更具环境变换上面这种方法可能不是那么好实现，样式就不太好处理了。
因此想到vuex中的状态管理，我的方案是通过引入vue的断点插件，由状态管理去判断页面使用哪套样式。
配置方法：
1、常规引包npm install vue-breakpoint-component -save
插件的详细参数直接看源码的描述文件吧
GitHub - adi518/vue-breakpoint: