js计算rem的问题

喜欢vue的妹子
  • 52

rem是相对于根元素<html>,下面是js计算rem布局的方式

(function(doc, win) {

var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

这段代码的
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
我想知道怎么把设计图的量出来的px尺寸转为相应rem的值,不太明白 有人吗

回复
阅读 2.3k
4 个回答

rem是基于根结点的font-size的px值来算的,然后这里clientWidth一般是320 375 1080等,这样fontSize就是不一样了

使用postcss-pxtorem插件 配置好比例 自动转化 量设计图 写px就好

按照你说的150/20 =7.5rem,上面320改成375

那么UI图上量出来的是750 那么我750/2=37.5rem
那么在浏览器上测试时候 320 640 750屏幕上显示的分别是是642px 1282 1502 感觉很奇怪

clipboard.png

function remReSize(){this.deviceWidth=document.documentElement.clientWidth;if(this.deviceWidth>750){this.deviceWidth=750}document.documentElement.style.fontSize=this.deviceWidth/7.5+'px'}remReSize();window.onload=window.onresize=function(){remReSize()};

以上代码针对 750的设计稿
640的设计稿,上面750改成640 7.5改成6.4
设计稿换算rem
100px=1rem
50px=.5rem

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏