前端开发中长度单位有很多，最为常用和熟知的肯定就是px了，随着前端的不断发展，em和rem也越来越普及，只用px一把梭的时代早已成为过去。是px过时了吗？如果对这些单位的使用场景不够了解，可能就会拿着一个rem从头梭到尾了。本篇我们来好好梳理一下css中的长度单位以及它们的使用场景，我们要在合适的场景使用合适的单位。

px

px是像素点单位，与之线性相关的单位有mm（毫米）、cm（厘米）、in（英寸）、pt（点，印刷术语，1/72英寸）、pc（派卡，印刷术语，12点）。

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

em

em是相对长度单位，适合基于特定的字号进行排版。1em=当前元素的字号，其准确值取决于作用的元素。

.padded {
	font-size: 16px;
	padding: 1rem;
}

上面的代码设置了元素的内边距为16px。最终浏览器会根据相对单位计算出绝对值。

使用em来设置padding、height、width、border-radius很合适，当前元素如果继承了不同的字号，响应的内边距、宽高也会自动随之缩放。

需要注意的是，如果使用em定义元素的字号，em的表现会稍有不同。上面提到，当前元素的字号决定了1em的值，但是，如果声明font-size：1.2em，该元素的字号肯定不能等于自己的1.2倍。实际上，此时font-size是根据当前元素继承的字号来计算的。

上图可以看到，p标签中的字号是1.2*16=19.2px，font-size是根据继承的字号计算的。

em需要注意的就在于此，同时用它指定一个元素的字号和其他属性时，浏览器必须先计算字号，然后使用这个计算值算出其余的属性值。

另外，当用em来指定多重嵌套的元素的字号时，就会产生意外的结果，内嵌的元素会一直继承上级的字号，导致要么嵌套字号越来越大，要么越来越小。

rem

rem和em很像，其实和em的理念很像，都是相对单位，rem中的r是root，顾名思义，rem是相对一个root元素（一般以html标签作为根元素）计算值的，不管在文档的什么位置。

rem结合了px和em的优先，既保留了相对单位的优势，又简单易用可控。那只用rem行吗？行，也不行。如果你只了解习惯这一个单位，就要充分发挥rem的优势，全站梭到底也没什么不行的。但是如果你想写出简单好看的css代码，在不同的场景下使用适当的单位会让你和你的队友少趟许多的坑。

一般情况下，我会使用rem设置字号，用px设置边框、用em来设置其他大部分的属性，尤其是内边距、外边距、圆角等。这样字号是可预测的，同时还能在其他因素改变元素字号时，借助em缩放内外边距。你觉得呢？

vh、vw、vmin、vmax

我们先介绍一下概念：

视口：浏览器窗口里网页可见部分的边框区域，不包括浏览器的地址栏、工具栏、状态栏。

vh：视口高度的1/100

vw：视口宽度的1/100

vmin：视口宽、高中较小的一方的1/100

vmax：视口宽、高中较大的一方的1/100

从定义上，相信小伙伴们已经明白了视口单位的用法。我来介绍相对视口单位的一个比较特别的用途：设置字号。诶？之前不是说设置字号用rem吗？用视口单位能有什么特别的呢？

用rem设置字号的时候，为了适配不同的屏幕大小，免不了要使用@media根据不同的屏幕设置根元素的字号大小，有一个小小的问题是，如果动态去调整浏览器的宽度，达到设置的断点时，一定程度会导致页面的字体突然变大或缩小。但是，如果是使用vw来设置字号呢？页面的字号是不是就不会突然的变化？会很平滑？

当然了，这种用法在实际应用中推广的程度不是特别高，有些是因为浏览器支持的问题，有些是因为没必要因为这么一点点的优化，而放弃心爱的rem。

总结

今天所写的内容主要是帮大家回顾一下css单位的用途及场景，还有一些单位（如fr）还没有提及，将会在后面的文章中结合别的属性写。各种单位的存在一定都有各自的特长和适合的场景，偶尔打开一下思路，也许能有更好的解决方案。大家有想和我分享的内容吗？感谢评论关注哦！