常用单位
单位 | 类型 | 描述 |
---|---|---|
px | Absolute | 1个 Viewport 像素 |
pt | Absolute | 1pt = 1/72 英寸 |
pc | Absolute | 1pc = 12pt |
% | Relative | 相对于父元素的字体尺寸 |
em | Relative | 相对于父元素的字体尺寸 |
rem | Relative | (即root em) 相对于html标签的字体尺寸 |
keyword | Relative | xx-small, x-small, small, medium, large, x-large, xx-large |
vw | Relative | 相当于Viewport宽度的1/100 |
vh | Relative | 相当于Viewport高度的1/100 |
vmin | Relative | 相当于Viewport高宽中长度相对较小的1/100 |
vmax | Relative | 相当于Viewport高宽中长度相对较大的1/100 |
我们重点关注 px、pt、%、em 和 rem
实验
默认设定下:
100% = 1em = 1rem = 16px = 12pt
我们来实验一下,chrome 浏览器环境。
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
text-align: center;
margin-top: 50px;
background-color: #efe1d6;
}
html {
font-size: 100%;
}
body {
font-size: 100%;
}
.px {
font-size: 16px;
}
.pt {
font-size: 12pt;
}
.percent {
font-size: 100%;
}
.em {
font-size: 1em;
}
.rem {
font-size: 1rem;
}
</style>
</head>
<body>
<p>html {font-size: 100%;}</p>
<p>body {font-size: 100%;}</p>
<p class="px">16px|这里是可以比较的文本内容</p>
<p class="pt">12pt|这里是可以比较的文本内容</p>
<p class="percent">100%|这里是可以比较的文本内容</p>
<p class="em">1em|这里是可以比较的文本内容</p>
<p class="rem">1rem|这里是可以比较的文本内容</p>
</body>
</html>
下图可以看出,他们的大小是一样的,更改浏览器的缩放比例,他们也是同步放大或缩小的。
如果我们更改浏览器中的字号为小(极小的情况 chrome 做了特别的处理),这样的话,我们又会发现他们是不一样大的:
如果用调试工具去检查,会发现未做设置的字体大小和相对单位的字体大小都是 12px(100% 缩放比例下)
这是因为我们的根元素指定的是 100%,这时候他是相对于浏览器中设置的字号来渲染的。
如果改变 html 为 font-size:200%
,可以看出,所有相对单位的字号是原先 100% 情况下的两倍。
em 与 rem
em 和 % 是等价的,他们都是相对于父元素的尺寸来计算尺寸的。而 rem 是相对于根元素的。相对于根元素的好处是,更改根元素的属性就可以轻易调整整个页面。
我们将浏览器的字号调整为 16px (默认),然后:
html {
font-size: 100% /* =16px */
}
body {
font-size: 2em; /* =32px */
}
p {
font-size: 1em; /* =32px */
/* font-size: 0.5em; =16px */
}
效果如下:
rem 相对于根元素所以只有 16px 其他则是 32 px
rem 的兼容
为了兼容不支持 rem 的浏览器(IE8及更早的版本),我们可以在使用 rem 的地方,前面加上对应的 px 值,这样就可以优雅降级了。
查询兼容性,可以参考 Can I use