初识px,em,rem

对于px,em,rem的认识一开始只停留在国内的设计师喜欢用px,而国外的设计师这喜欢用em和rem,今天就来总结一下这三者的区别

三者的区别

px：像素。像素px是相对于显示器屏幕的分辨率而言的。

em：相对长度单位。相对于当前对象内文本的字体尺寸。如果当前文本尺寸没有被设置，则相对于浏览器的默认大小尺寸（默认16px,10px=0.625em;如果使用em,为方便在body上设置font-size=62.5%;1em就相当于10px)

rem：CSS3新增相对单位，与em相似，同样是相对大小，不同的是rem是相对HTML根元素（CSS 中的根元素是指 :root 选择器匹配到的元素，也就是文档树中最顶层结构的元素。在不同的场景下具体的根元素不同。在 HTML 中是 html 元素，但在其他情况下，就不是 html 元素啦），它具有相对大小与绝对大小的优点，通过他可以只是修改跟根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。我们可以这样写：

div{
font-size:14px;
font-size:0.875rem;//10px = 0.625em
}

对于不兼容他的浏览器会忽略rem设定的大小

现如今除了IE8及更远的版本均支持rem