在 CSS 中单位长度用的最多的是 px,em,rem. 那么其中 em,rem 的区别是什么? 下面本篇文章就来给大家介绍一下 em,rem 的区别, 希望对大家有所帮助.
em
em 是相对长度单位. 其相对于当前对象内文本的 font-size, 如果当前文本的字体尺寸没有设置, 则相对于浏览器的默认字体尺寸.
em 的特点是:
em 的值不是固定的.
em 会继承父级元素的字体大小
在这里有一个 em 使用的小技巧: 任意浏览器的默认字体高都是 16px. 所有未经调整的浏览器都符合: 1em=16px. 那么 12px=0.75em,10px=0.625em. 为了简化 font-size 的换算, 需要在 CSS 中的 body 选择器中声明 Font-size=62.5%, 这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10, 然后换上 em 作为单位就行了.
所以在我们使用 em 时候, 写 CSS 的时候, 需要注意几点:
body 选择器中声明 Font-size=62.5%;
将你的原来的 px 数值除以 10, 然后换上 em 作为单位;
重新计算那些被放大的字体的 em 数值.
避免字体大小的重复声明. 也就是避免 1.2 * 1.2= 1.44 的现象. 比如说你在 #content 中声明了字体大小为 1.2em, 那么在声明 p 的字体大小时就只能是 1em, 而不是 1.2em, 因为此 em 非彼 em, 它因继承 #content 的字体高而变为了 1em=12px
rem
rem 这个单位是 CSS3 中新增的一个相对单位, 目前移动开发使用也是最广泛的, 它也是一个相对单位, 它的相对和 em 就是不一样了, 使用 rem 为元素设定字体大小时, 仍是相对大小, 不过相对的只是 html 根元素, 是不是感觉比 em 要简单的多, 不用时时去关注父级的情况. 这个单位可谓集相对大小和绝对大小的优点于一身, 通过它既可以做到只修改根元素就成比例地调整所有字体大小, 又可以避免字体大小逐层复合的连锁反应.
em,rem 的区别:
rem 与 em 都是相对单位, 我们使用它们的目的就是为了适应各种手机屏幕.
rem 是根据 HTML 根节点来计算的, 而 em 是继承父元素的字体.
对于 em 和 rem 的区别一句话概括: em 相对于父元素, rem 相对于根元素.
rem 中的 r 意思是 root(根源), 这也就不难理解了.
来源: http://www.css88.com/qa/css3/13481.html