css3属性rem的使用

rem 是指根元素（root element，html），这是一个css3样式，IE9+，Firefox、Chrome、Safari、Opera 的主流版本支持。

作用：css中他可以代替px作为大小单位使用，但是这个大小和px有个重要的区别就是他的大小是相对的

使用情况

国外大量使用rem代替px，国内目前大多数用的都是px，不过越来越多的国内互联网公司已经开始使用rem代替px

相对大小

根元素默认的 font-size 都是 16px，在不设置默认根元素的font-size时，1rem=16px，但是rem是一个相对单位，相对于根元素的字体大小。如果我们这里设置根元素的 font-size = 62.5% /* 10÷16=62.5% */ ，那么1rem就等于10px,有很多公司这么做，便于px和rem的换算

优点

网上有很多介绍rem的文章，但是都没有说rem的优点在哪，为什么用它。我觉得他最大的优点就是使用rem为单位，整体页面缩放会变得很简单（直接修改root元素的单位大小，那么所有以rem做单位的元素都会自动放大或缩小）

看一个例子：页面中有2个div，红色的大小用px标示，绿色大小用rem标示，现在定时修改root元素的大小，可以发现用px作为单位的元素大小不会产生变化，而用em为单位的元素大小都根据root元素的变化而变化。这种特效做整体页面缩放，页面自适应都有很多好处

代码：


<div style="background-color:red;width:32px;height:32px;display:inline-block"></div>
<div style="background-color:green;width:2rem;height:2rem;display:inline-block"></div>

<script type="text/javascript">
     var defaultsize = 16
     setInterval(
            function(){
                if(defaultsize>50){
                    defaultsize = 16
                }
                document.documentElement.style.fontSize = defaultsize++ + "px"
            },100)
</script>

css3属性rem的使用

使用情况

相对大小

优点

推荐阅读