这篇博客介绍了CSS中的长度单位，包括in、cm、mm、pt、pc等传统单位，以及时间和角度单位。重点讨论了CSS3的新单位vw、vh和vm，它们是相对于视窗大小的比例单位，常用于响应式布局。例如，20vw表示元素宽度为屏幕宽度的20%，40vh表示元素高度为屏幕高度的40%。尽管兼容性有待提高，但在某些场景下，这些单位可以实现灵活的布局效果。
长度单位：（关于px详解见文末链接）
| 单位 | 含义 |
| px（绝对？相对？） | 相对于屏幕分辨率而不是视窗大小：通常为1个点，一般为1/96英寸 |
| em（相对单位） | 相对于父元素的字体大小，若父元素font-size为16px，那么1em就为16px |
| %（相对单位） | 相对于父元素。正常情况下是通过属性定义自身或其他元素 |
| rem（相对单位） | 相对于根元素字体大小，若根元素font-size为16px，那么1em就为16px |
| ex（相对单位） | 相对于小写字母"x"的高度 |
| vw（相对单位） | 相对于视窗的宽度：视窗宽度是100vw |
| vh（相对单位） | 相对于视窗的高度：视窗高度是100vh |
| vmin（相对单位） | vw和vh中较小的那个 |
| vmax（相对单位） | vw和vh中较大的那个 |
| ch（相对单位） | 1ch的大小和字母o的宽度相等 |
| in（绝对单位） | inch, 表英寸 |
| cm（绝对单位） | centimeter, 表厘米 |
| mm（绝对单位） | millimeter, 表毫米 |
| pt（绝对单位） | 磅，1/72英寸 |
| pc（绝对单位） | 12点活字，或1/12点 |
| gd | 一般用在东亚字体排版上，这个与英文并无关系 |
1in = 2.54cm = 25.4 mm = 72pt = 6pc
时间和角度单位：
| 单位 | 含义 |
| deg | degrees, 角度，一个圆360度 |
| grad | grads, 梯度，一个圆400梯度 |
| rad | radians, 弧度，一个圆2π弧度 |
| turn | turns, 圈数，一个圆共一圈 |
| ms | milliseconds, 毫秒数 |
| s | seconds, 秒数 |
| Hz | Hertz, 赫兹 |
| kHz | kilohertz, 千赫 |
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
为css3中的新增单位：vw，vh，vm——相对于视窗。
“视窗/区”：浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏，标题栏以及底部工具栏的浏览器区域的大小。
可用来做响应式布局。如设置宽度为20vw，高度为40vh，表示当前元素在任何屏幕下都是div占当前屏幕宽度的20%，当前高度的40%。但兼容性不好，使用并不广泛。
扫一扫
1350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
