两者区别
em会继承父级元素的字体大小。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素
rem单位的使用
(直接引入下面的js代码就可实现自适应字体)
如果我们需要的是实现字体自适应,不需要手动刷新,就需要js去封装 rem 单位。
var fun=function(doc,win){
var docEl=doc.documentElement,
resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
recalc=function(){
var clientWidth =docEl.clientWidth; //clientWidth窗口大小
if(!clientWidth) return;
if((12 * (clientWidth / 640)) <= 20) {
//此处 640 为屏幕宽度,
// 12 * (clientWidth / 640) ; 表示 12px =1rem
docEl.style.fontSize = 12 * (clientWidth / 640) + 'px';
}else{
docEl.style.fontSize = 10 +'px';
}
}
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
}
fun(document,window);