1、rem定义
rem是相对长度单位,相对于html元素(根元素)font-size计算值的倍数的css单位。
简单理解:1rem = html的font-size值(px)
eg:
html{ font-size:10px; } div{ font-size:1rem;//实际 1*10px=10px }
2、适配原理
js设置 html标签的font-size = 移动设备宽度/设计稿宽度 * 100 + "px"
具体:移动设备宽度/设计稿宽度 是渲染效果相对于设计稿的缩放比 ==》 *100 是为了把rem单位的font-size值放大100倍 (因为当font-size值小于浏览器支持的最小字体时,浏览器会把这个值按最小字体处理),为了方便计算,倍数一般为10或100
eg:
设计稿宽度700px,窗口宽度700px,倍数为100 :
html { font-size:100px } 设盒子 width:1rem;(即100px)此时盒子占屏1/7
若窗口宽度 350px :
html {font-size:50px} 此时盒子宽度 1rem=50px 盒子占屏1/7 实现了移动端适配。
3、js实现
根据获取到的设备宽度,动态修改根元素的font-size值
var cw = document.documentElement.clientWidth;
if (cw > 750) {
cw = 750;
}
document.getElementsByTagName("html")[0].style.fontSize = 100 * ( cw / 750) + 'px'
兼容性
(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 = 640;
};
if (width > maxWidth) {
width = maxWidth;
}
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结束
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);