CSS 长度单位总览与详解

CSS 有两种类型的长度单位：相对的 和 绝对的。

相对的单位 分为：文本相对长度单位 和 视口相对长度单位。

在做移动端适配或者是大屏适配的时候，我们用到的是相对单位，而不是绝对单位，最常用的来适配的单位是 rem。

视口 在PC端中：指的是浏览器的可视区域，宽度和浏览器的宽度一致，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。

视口 在移动端中，涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）、和 理想视口（Ideal Viewport） 。

CSS 长度单位总览与详解

1.1、文本相对长度单位

长度单位	版本	详解
em	CSS1	相对于元素的最近的父元素font-size的值，如果最近的父元素没有定义font-size，则一直往上找，都没有就相对于浏览器的默认font-size。计算：如果父元素的 font-size=14px 的话，3em = 14*3 = 42px。
rem	CSS3	em 是根 em（root em）的缩写，相对于根元素（即 html 元素）font-sized 的值的倍数。计算：如果html 的font-size = 20px 的话，3rem = 20*3 = 60px。
ex	CSS1	所用字体中小写 x 的高度。
ch	CSS3	数字“0”的宽度。

em 与 rem 的区别：em是相对于父元素的font-size的值，rem是相对于根元素 html 的 font-size 的值。

1.2、视口相对长度单位

长度单位	版本	详解
vw	CSS3	viewpoint width，视窗宽度，视口的宽被均分为100单位的 vw，即 1vw = 视窗宽度的1%。
vh	CSS3	viewpoint height，视窗高度，视口的高度被均分为100单位的 vh，1vh = 视窗高度的1%。
vmax	CSS3	vw 和 vh 中较大的那个。
vmin	CSS3	vw 和 vh 中较小的那个。

1.3、绝对长度单位

绝对单位之间的换算：1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

长度单位	版本	详解
px	CSS1	像素（pixels），1px = 1/96in。
pt	CSS1	点（points）， 1pt = 1/72in。
cm	CSS1	厘米。
mm	CSS1	毫米。
in	CSS1	英寸（inches），1in = 2.54cm。
pc	CSS1	派卡（picas）， 1pc = 12pt。
q	CSS3	1/4毫米（quarter-millimeters）， 1q = 0.25mm。