JS动态计算移动端rem

发布于2017年2月16日 10:18:37 ，最后一次修改于2017年2月18日 16:50:48

随着互联网的发展，wap端的浏览量已超过了PC端，每个浏览器默认的字体大小也不一样，为了提高用户在咯浏览终端的体验度，就不得不用css3 的rem了。

rem的取值是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需求来定了。下表为常用的px值和rem的对应关系。

px换算成rem（根元素字体大于12px）：如果父元素的字体大小为93.5%，而你想设置一个div的宽度为500px，那么对应的rem值为500/15=33.333333rem,如果没有具体设置父元素字体大小，那么rem为500/16=25.0rem。

如果你没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px，那 1rem 就为 20px。

在开发移动端的时候，各种移动设备的分辨率（物理像素）杂七乱八，虽然可以硬性的用media查询去走一步改一步，显得很麻烦也很冗余。为了解决这个问题，于是就有了全适配的js解决方案。

;(function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//屏幕分辨率参考ipone5
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
     因为rem是css3新引进的度量单位，目前常用的主流浏览器基本都支持这个属性，还在用IE6-8的人自行更新浏览器吧（IE6 MLGB....）。

发表评论