rem.js 篇章

/*
* Resets the unit of the page used for mobile phone
* The screen benchmark is 750 pixels
* */
(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem,rootStyle;
function refreshRem() {
/*获取移动设备的宽度*/
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
}
if (width > maxWidth) {
width = maxWidth;
}
/*与淘宝做法不同，直接采用简单的rem换算方法1rem=100px*/
/*rem的值等于(设备的宽度)x100/(设计稿宽度)*/
var rem = width * 100 / designWidth;
/*兼容UC开始*/
rootStyle="html{font-size:"+rem+'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if(!document.getElementById('rootsize')){
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id='rootsize';
}
if(rootItem.styleSheet){
rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
}else{
try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
}
/*兼容UC结束*/
/*设置html的字号为rem的值*/
docEl.style.fontSize = rem + "px";
}
refreshRem();

win.addEventListener("resize", function() {
/*防止执行两次*/
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);

win.addEventListener("pageshow", function(e) {
if (e.persisted) {
/*浏览器后退的时候重新计算*/
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);

if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);

本js是iphone6/7/8的基准设计稿的基准上编译的只是个人见解（750可以更换）这里 1rem=100px

在部分手机上上面的固定写法会出问题可以用以下的js

// 转化rem单位
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
var html = document.getElementsByTagName('html')[0];
var settedFs = settingFs = parseInt(100 * (clientWidth / 750));
var whileCount = 0;
while(true) {
var realFs = parseInt(window.getComputedStyle(html).fontSize);
var delta = realFs - settedFs;
//不相等
if (Math.abs(delta) >= 1) {
if (delta > 0)
settingFs--;
else
settingFs++;
html.setAttribute('style', 'font-size:'+settingFs + 'px!important');
} else
break;
if (whileCount++ > 100)
break
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);