Vue.js——PC端和移动端样式适配方案

此方案整合了断点响应式样式，和移动端样式重分配。

---

前言

最近在学习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、在需要的地