今天我们就来看一下css中的单位。或者你会说，不看不知道，一看吓一跳，原来css有那么多的单位啊，虽然有一些我们很少用，或者说没用过，但，，，它就在那里。一起去看一看吧。
css中的字体单位主要分为两种类型：绝对长度单位和相对长度单位。
1.绝对长度单位：所谓绝对长度单位就是说它是一个固定值，它反映的是一个实实在在的物理尺寸，说多大就是多大，绝对长度单位不依赖于环境（显示器、分辨率、操作系统等。绝对长度单位分为以下几种：
cm:厘米
mm:毫米
in：英寸(1in = 96px =72pt= 2.54cm)
px：pixel 像素 (1px =1/96in)
pt: point 大约1/72英寸(1pt = 1/72pt)
pc: pica 大约6pt,也就是1/12英寸
px,表示pixel,称为像素，像素的大小随用户显示器的大小和像素深度而变。一个像素等于屏幕上一个点的高度/宽度，是屏幕上显示的最小单位。这个度量单位最适合显示器，BUT! pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力。
pt，表示point，来源于打印设计，是印刷行业常用单位，叫“磅”，等于1/72英寸。pt是一个标准的长度单位，最适合于印刷，但也常用于用户显示器。
在Windows系统中，px和pt的使用区别，只有当用户改变默认的96DPI下才会产生。使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。附公式：px = pt * DPI / 72。那么什么是DPI呢？显示器的DPI(PPI)表示dot(pixel) per inch,即每英寸的点（像素）数，表示“清晰度”，“精度”，默认情况下为96DPI，但是我们是可以对此进行更改的，在桌面上点击右键，弹出快捷菜单>属性>setting>Advanced>General>DPI setting>96 DPI
在浏览网页过程中，所有的“大”“小”概念，都是基于“屏幕”这个“显示界面”上。“屏幕”上的各种信息，包括文字、图片、表格等等，都会随屏幕的分辨率变化而变化。在不同分辨率下，无论是px还是pt，屏幕上的各种信息都会改变大小。所以，基于这种现实情况，如果想要让某个字体，在所有用户面前呈现的效果是一样的，几乎是不可能的，
2.相对长度单位：当我们利用相对长度单位定义字体的大小时，字体的大小不是绝对的，而是相对于某一个参照而言的。相比于绝对长度单位，相对长度单位也更适用于不同的显示器。相对长度单位包括我们最常见的em和rem。除此之外，相对长度单位还有vh ,vw,vmax,vmin,ex,ch，百分比。
1⃣️em 在我们设置字体的时候，它的大小是以父级为参照的，下面我们来用一个例子来进行说明：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .div1{ font-size:20px; } .div2{ margin-top:20px; font-size:1.5em; } </style> <body> <div class="div1"> <span id="">我是父级元素</span> <div class="div2"><span>我是子集元素</span></div> </div> </body> </html>
运行结果如下：
说明：第一行文字大小为20px,第二行文字现在的字体大小现在显示的是30px,我们刚才说过em是相对于父级，那么此时，1.5em = 1.5*20 = 30px;
2⃣️rem 作为css3新增的相对单位rem引起业界的广泛关注。虽然它与em一样都是对长度单位，但是，它却比em更好用。为什么这么说呢？rem在我们设置字体大小的时候，它的参照物是相对于HTML根元素的，也许你会说，这有什么了不起，不就是参照物不一样么，它还是相对长度单位。虽然em是靠爹的，但没有办法，rem确实是比它更方便。这话不是没有依据的，em相对父级，可是当我们比较多的一层一层去嵌套的时候，真的是着实让人头疼。但是rem就不一样了，它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
下面我们举一个简单的例子来说一下rem的具体用法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> html{ font-size:20px; } .div1{ font-size:1rem; } .div2{ margin-top:20px; font-size:2rem; } </style> <body> <div class="div1"> <span id="">我是父级元素</span> <div class="div2"><span>我是子集元素</span></div> </div> </body> </html>
运行结果：
解释一下，为什么设置为20px，首先10的倍数容易计算，那为什么不是10本身而是20？现在Chrome最小的字体是12px，所以10px是无效的，改变一下HTML的大小，真的可以成比例改变所有字体的大小哦，有木有很方便，默认情况下，html根元素字体大小一般为16px噢。
3⃣️vh ：viewpoint height，翻译成汉语是视窗高度，1vh=视窗高度的1% 。当你以vh为单位时，字体的大小是会随着你屏幕窗口的高度而变化的。
4⃣️vw ：viewpoint width，翻译成汉语是视窗宽度，1vw=视窗高度的1% 。当你以vw为单位时，字体的大小是会随着你屏幕窗口的高宽度而变化的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> h1{ font-size:10vw; } </style> <body> <h1>vh为单位设置字体大小</h1> </body> </html>
现在我是这么大：
现在我是这么大，
5⃣️vmax 当字体单位设置为vmax时，表示此时的字体大小为当前页面显示时，vh和vw中较大的一个，同理，vmin表示此时的字体大小为当前页面显示时，vh和vw中较小的一个
6⃣️ex 它的大小依赖于当前英文字母小x的高度，这个单位我们很少会用到。
7⃣️ch 数字0的宽度 下面我们来看一个例子，就知道究竟是怎么回事了
运行结果如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> <style> h1{ margin:10px 0; font-size:16px; } div{ overflow:hidden; width:10ch; background:#ccc; } </style> </head> <body> <h1>定义一个宽度正好能装下10个0的容器：</h1> <div>0000000000</div> </body> </html>
8⃣️.百分比。属性值中使用百分比设置大小，将在容器对象文字大小的基础上进行改变。如果我们设置body的文字大小为10。我们设置p的文字大小为150%，则p的文字大小就为15。不管10是什么样的单位，百分比作为一种比例进行缩放调整。下面我们以px为例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> <style> body{ font-size:20px; } div{ font-size:150%; } </style> </head> <body> <div>以百分比设置</div> </body> </html>
css中字体的单位如此之多，但具体的用哪种方法还是要取决于具体情况。