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。 |
em
和 rem
比较
单位 | 特点 |
---|---|
em |
相对单位em是相对于元素本身的字体大小的。 在css中唯一例外的是 font-size 属性,它的em 和ex 值指的是相对父元素的字体大小。 |
rem |
集相对大小和绝对大小的优点于一身, 通过它既可以做到只修改根元素就成比例地调整所有字体大小, 又可以避免(使用em)字体大小逐层复合的连锁反应 |
em
缺点
- em 的值并不是固定的;
- em 会继承父级元素的字体大小。
举例
body{
font-size: 10px;
}
h2{
display: block;
width: 80%;
font-size: 1.5em;
margin: 0.5em;
}
h2
的字体大小继承了body
字体, 10px * 1.5 = 15pxh2
的margin
属性则是相对于本元素字体大小: 15px * 0.5 = 7.5px
如下图所示
rem
使用小技巧
body
选择器中声明Font-size=62.5%;
- 将你的原来的
px
数值除以10
,然后换上rem
作为单位;