首页 > 代码库 > 理解em,rem

理解em,rem

  在平常做网站写代码的时候一般都是使用px,在之前的学习时就略微的学习了一些关于em、rem的知识,但是由于一直没有用到过,所以几乎全部忘记了。今天在研究一些知识的时候用到了em,所以特意将学到的知识总结一下。

1.em

em是相对长度单位,相对于当先对象中的字体尺寸。比如在某个div中font-size设置为20px,那么,1em就相当于20px,0.25em就相当于5px。由于浏览器的默认字体大小为16px,所以为了简化font-size的换算,就要在body的选择器中将font-size设置为62.5%,换算成像素,就是16*62.5%=10px,这样在之后的设置尺寸大小的时候就可以用1.2em代表12px,也就是说此时的换算关系就是1em=10px。

值得注意的是em会集成父级元素的字体大小。所以不要轻易的在当前元素中改变em。

2.rem

rem和em有相似的使用方法,都是相对长度单位。不同的是rem需要在根元素html的css选择器中设置font-size,设置font-size为14px,则1rem就是14px。使用这个长度单位的好处是可以用于做适配。可以直接在<hmtl>中更改font-size就可以在不同的移动端显示不同大小的元素。

 

资料来源:http://www.cnblogs.com/leejersey/p/3662612.html

理解em,rem