常用单位
下面是对这些单位的一个简单整理:
单位 | 类型 | 描述 |
---|---|---|
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
和vw
。
它们之间有什么区别?
从概念上很难理解这些单位之间的差别,所以下面用一些实例来说明。
例1. 默认设定
当你不设定字体尺寸时,HTML会提供一个默认的尺寸设定。大多数浏览器中<html>和<body>标签中的默认字体尺寸是100%,没有概念?看这个等式:
100% = 1em = 1rem = 16px = 12pt
还是不懂?那就换个说法,比如说你给一个<p>设置字体尺寸为100%,给另一个<p>设置为16px,在屏幕上看到的这两个<p>中的字体大小是一样的,下图列出了用几个不同单位设置的字体尺寸,可以看出是一样大的: