rem如何使用

rem是相对于根元素的单位

在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器（:root），可以用来选中它自己。这等价于类型选择器html，但是html的优先级相当于一个类名，而不是一个标签。

rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。

在这个例子里，根元素的字号为浏览器默认的字号16px（根元素上的em是相对于浏览器默认值的）。无序列表的字号设置为0.8rem，计算值为12.8px。因为相对根元素，所以所有字号始终一致，就算是嵌套列表也一样。 

rem只是你工具包中的一种工具。掌握CSS很重要的一点是学会在适当的场景使用适当的工具。一般会用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角（不过我有时用百分比设置容器宽度）。

 以1920的设计图为稿

<script>
// 页面刚加载完成的时候。设置根大小    
document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920 + 'px';

// 当浏览器窗口改变的时候，监听窗口变化设置根元素的fontsize
window.addEventListener("resize", setRemSize, false);

function setRemSize() {
   if(document.documentElement.clientWidth < 1366 ){
            return
   }
   document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920 + 'px';
}
</script>

// 以1920的设计图为例，设计图中是多少px就是多是rem
// 比如 div宽度是100px 对应rem 则是100rem

点击跳转至：深入解析CSS 一书_woowen！的博客-CSDN博客