当我们在开发移动端应用项目时，为了前端页面能够在不同分辨率的屏幕中布局自适应显示，这里你肯定会想到利用 rem 来对页面进行布局!
rem的适配原理
指元素相对根元素html的font-size，按照等比例缩放元素大小。
项目中统一设置 rem 和 px 的比例为：
px : rem = 37.5 : 1
几个概念
1、机型的设备像素比 dpr（devicePixelRatio）：
所谓设备像素比其实就是：设备上物理像素和设备独立像素(device-independent pixels (dips))的比例
公式表示就是：window.devicePixelRatio = 物理像素 / dips
2、设备独立像素：
与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了 CSS 像素。比如iPhone 6 的设备独立像素就是 375 * 667
3、机型的设备独立像素可以通过 document.documentElement.clientWidth 或 document.body.clientWidth 来获取。
所以上面的 37.5 其实就是用 iPhone 6 的设备独立像素 375 除以 10 得到的，当然这里你也可以用别的比例。
实现 px 转 rem 的脚本
document.body.style.height = window.innerHeight + "px";
/*动态改变根元素字体大小*/
function recalc() {
// 获取客户端的宽度
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
if(!clientWidth) return;
// 字体大小 = 1个rem单位表示多少个像素（设备的宽度 /设计宽度）
document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
}
function initRecalc() {
recalc();
// if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
if(!document.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
}
initRecalc();
想好了解决方法,但还要写换算 rem 数值的脚本，真麻烦！就不能有个简单粗暴的方法吗？
必须得有啊，我们安装配置 postcss-pxtorem 和 amfe-flexible 这两个依赖，就可以轻松实现啦！
1、首先，我们要安装一下这两个包
npm安装方式：
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
yarn安装方式:
yarn add amfe-flexible
yarn add postcss-pxtorem --dev
2、在main.js中引入amfe-flexible
import 'amfe-flexible/index.js'
3、配置postcss-pxtorem
-
vue-cli2配置方式：
在postcss.js文件中的plugins下新增postcss-pxtorem的配置
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, // 根据设计图尺寸比例设置
propList: ['*'], // 需要被转换的属性
selectorBlackList: [] // 不进行px转换的选择器
}
}
}
-
vue-cli3配置方式：
在根路径下新增postcss.config.js文件（如果有，就不新增）
配置的内容与上相同
完成上述步骤后，就可以使用设计图里的px值进行代码编写了。如果设计图的宽度是1920，则给rootValue设置192就行，amfe-flexible会帮助我们计算好根字体。
postcss-pxtorem也可单独使用，但是相应的我们得自己写一个根字体的计算代码，以及视图窗口大小变化的监听事件，比较起来，还是配合amfe-flexible比较省时省力。
