rem适配原理
rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,也就是我们
前端常说的适配单位rem。因为rem的特性相对长度单位,常被用来做移动适配,pc端页面不推荐使用rem。
rem的移动适配原理:
在移动端的页面开发中,需要根据不同的手机去适配页面,让页面可以自适应的展示。
也就是说根据屏幕宽度的大小,改变元素和字体的大小,屏幕越宽元素和字体越大。
这个时候我们通常会用到rem作为单位
rem是css3中新增的一个单位,它是一个相对单位
rem用作非根元素的时候,是相对于根元素设定的字体大小,,用于根元素的时候,相对于初始字体的大小
rem是相对长度单位,可以做到一样的取值,在不同尺寸的屏幕上的大小按比例缩放。 **rem的定义:**rem(font size of the root element)是相对于根元素(即html元素)font-size计算值的倍数。 例如html标签设置font-size:16px,同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=16px*1.2=19.2px。 因此这种方法的适配原理是:根据不同屏幕的宽度,以相同的比例动态修改html的font-size适配,并将px替换成rem,它可以很好的根据根元素的字体大小来进行变化,从而达到各种屏幕基本一直的效果体验。
动态配置rem
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function() {
if (docEl.clientWidth > 750) {
docEl.style.fontSize = "100px";
doc.getElementById("app").style.width = "750px";
} else {
var width = docEl.clientWidth / 7.5;
docEl.style.fontSize = width + "px";
doc.getElementById("app").style.width = "auto";
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);