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>

推荐阅读


web app变革之rem

感谢收看,如果对大家有帮助,请github上follow和star,本文发布在刘彦玮的技术博客,转载请注明出处

Loading Disqus comments...
Table of Contents