使用rem做适配的最佳实践

安装依赖：yarn

运行开发环境：yarn run serve

项目说明

本项目的目的是实现下面这类需求

在一个项目内同时包含一张pc端页面A和一张移动端页面B。A、B两个页面的设计图宽度分别为1920px和375px。设计师期望在可视区域宽度为1920px的pc设备上可以1:1（实际尺寸:设计图尺寸）显示页面A，而在其他尺寸的pc设备上对页面A做等比缩放。同样的，还希望在可视区域宽度为375px的移动设备上可以1:1显示页面B，而在其他宽度的移动设备上对页面B做等比缩放。

不要觉得这个需求匪夷所思，如果这是个官网项目而页面A和B分别是pc端和移动端首页的话就很容易理解了。另外，两个页面虽然都是首页这个主题，但这两个页面的布局一定是差别较大的，否则也没必要单独做成两个页面了。

最后声明一下，这个样例项目中的目录结构完全不具有参考价值，我只是想跟大家分享多端适配的解决方案。

难点

我相信各位读者一定有各种办法实现上面描述的需求，但大家的方案能不能保证当可视区域宽度=设计图宽度的时候一比一还原设计图呢？ 1:1指的是0误差。我举个例子，如果一个矩形在1920px宽度的设计图上是99px宽，那么等它到了用户的电脑上，如果用户浏览器的可视区域恰巧也是1920px宽，那这个矩形实际渲染出来的宽度必须为99px，不能有小数点！ 另外，真正的难点在于，我们要在pc和移动两端同时做到这点。 优雅地解决这些难题就是本方案的目的。

解决方案

既然要求我们使用等比缩放来做适配，那目前最优的技术手段一定是rem。我的方案只有两步，但是为了调试方便请允许我增加一个第0步，这在大家的项目中可能是不需要的。

第0步. 根据设备做路由重定向

这部分代码在/src/routeConfig.js中

此功能指的是，如果用户使用移动设备访问pc端首页的话会为其重定向到移动端首页，反之亦然。虽然需求中不包含这一功能，但是为了测试方便，我选择把它加上。（其实这类项目往往都是会要求做重定向这个功能的）

我认为可以依据两类条件来做路由重定向，一是根据ua来判断设备属于移动端还是pc端并据此做跳转。二是以屏幕宽度作为跳转的依据。到底是选择其中一种还是选择更为复杂的方案可能跟产品经理和UI聊聊再做决定比较好。本文选择通过ua来辨别设备。

第1步. 配置postcss-pxtorem插件

详细配置在/postcss.config.js中

使用此插件的目的是利用postcss在打包过程中将px转化为rem。所谓转化其实就是将样式中以px为单位的数值➗rootValue，计算结果为rem。

插件的配置方法如下：

1. 控制台执行yarn add postcss postcss-pxtorem --dev
2. 根目录下创建postcss.config.js文件
3. 在postcss.config.js文件内引入插件并将rootValue设置为1

第2步. 动态设置html的fontsize

这部分代码在/src/autoSize.js中

具体方法是根据用户设备动态修改html的fontSize。公式为fontSize=可视区域宽度/设计图尺寸