Vue移动端项目自动将px转成rem

当我们在开发移动端应用项目时，为了前端页面能够在不同分辨率的屏幕中布局自适应显示，这里你肯定会想到利用 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();作者：Haobro链接：https://juejin.cn/post/6858182336786546702来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。