Vue开发移动端实现px转rem

08-06 15:51

在移动端使用 rem 做为基本单位，是一种传统且可靠的方法，它可以根据设备屏幕大小，动态调整布局、字体等大小，让页面在各种设备访问时都能保持一致性。

传统开发过程中，通过引入一段 media 的 js 函数，开发时直接将单位设置为 rem，如下所示：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

var box=document.body.getBoundingClientRect();

if (!clientWidth) return;

if (clientWidth > 640) { //根据设计稿宽度640px或750px设置对应的值

docEl.style.fontSize = '64px'; //根据设计稿宽度设置

return;

}

docEl.style.fontSize = (clientWidth / 10) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

这种做法开发时需要计算好 rem 后再写入代码中，步骤繁琐，增加工作量。

使用 Vue 开发时，通过 postcss-pxtorem 和 amfe-flexible 两个工具，实现移动端 REM 适配的经典组合

微信小程序