Fork me on GitHub

移动端rem布局

rem是什么

rem(font size of the root element)是指相对于根元素的字体大小的单位。

为什么web app要使用rem

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同。

使用JavaScript动态计算rem

代码如下:

(function () {
var html = document.documentElement;
var htmlWidth = html.getBoundingClientRect().width;
html.style.fontSize = htmlWidth/16 +"px";
})()