深入理解CSS中em, rem, ex区别,及使用技巧

CSS 中常见尺寸

单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
em 1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如,如果某元素以 12pt 显示,那么 2em 是24pt。
在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。
rem rem表示“Root EM”,字面上指的是根元素的em大小。
在Web文档的上下文中,根元素就是你的html元素。
如果没有重置,html默认font-size:16px。

emrem 比较

单位 特点
em 相对单位em是相对于元素本身的字体大小的
在css中唯一例外的是font-size属性,它的emex值指的是相对父元素的字体大小
rem 集相对大小和绝对大小的优点于一身,
通过它既可以做到只修改根元素就成比例地调整所有字体大小,
又可以避免(使用em)字体大小逐层复合的连锁反应

em 缺点

  1. em 的值并不是固定的;
  2. em 会继承父级元素的字体大小。

举例

body{
  font-size: 10px;
}

h2{
  display: block;
  width: 80%;
  font-size: 1.5em;
  margin: 0.5em;
}
h2的字体大小继承了body字体, 10px * 1.5 = 15px
h2margin属性则是相对于本元素字体大小: 15px * 0.5 = 7.5px
如下图所示

深入理解CSS中em, rem, ex区别,及使用技巧


rem 使用小技巧

  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上rem作为单位;

参考文章链接

css中单位em和rem
彻底弄懂css中单位px和em,rem的区别

上一篇:使用属性选择器来设置元素的样式 、理解绝对单位与相对单位


下一篇:[css] 对比下px、em、rem有什么不同?