rem单位详解及应用
Mar 27, 2015
rem(font size of the root element)是指相对于根元素的字体大小的单位。
我们经常会看到rem值设置为62.5%,
html {font-size: 62.5%;}
这是因为现在浏览器中的默认的字体大小都是16px,62.5%*16px=10px;所以1rem=10px;方便计算。但是这有一个bug,就是中文版的chrome支持的最小字体是12px,那么1rem最小值就是12px,而不是10px了。
可以从两个方面解决这个bug,
1.设置1rem=100px;
html {font-size: 625%;}
2.采用绝对的px值设置。如
html {font-size:20px;}
到这里肯定有很多人会问我怎么计算出不同分辨率下rem的值?
在移动端,随着iphone6和plus的加入,屏幕像素宽度有320,384,480,640,1080等,大有赶上电脑屏幕的趋势阿。我们可以通过JS去动态计算根元素的font-size,这样的好处是所有设备分辨率都能兼容适配。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);