CSS中的长度单位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）

CSS中有许多设置长度单位的属性，除了经常使用的px,em之外，还有一些不太经常使用的，但是作为一个前端工程师，也是很有必要了解的。

绝对长度单位

px

px(pixel)其实应该算是我们最熟悉的长度单位了，是相对屏幕分辨率而言，也是经常被作为其他单位的基准。这个px和物理设备的像素是有区别的，为了保证在不同设备上视觉效果基本相同，px是采用参考像素的,根据css的规范上来看，1px在电脑显示器上看，大概是1/97英寸长。

in

in是inches的简写，在CSS中， 它与px的换算关系为

1in == 96px

cm

厘米是在现实生活中，运用的比较广泛的单位，与px的换算关系是

1cm == 37.8px

mm

比cm小一个数量级，换算关系为

1mm == 0.1cm == 3.78px

相对长度单位

相对长度单位，顾名思义，它的长度是根据其他长度计算出来的。 viewport相关的单位本来也是属于这一部分的，但是为了区别对待，把它单拎出来了。

em

em(font size of the element) 是相对于当前元素的字体大小(font-size)属性值计算出来。由于浏览器默认字体大小是16px，则在默认情况下1em = 16px。如果当前元素没有设置字体大小就依赖其父元素的大小。如果其父元素的大小也没有显式的font-size，则向上寻找直至找到能进行计算的元素。这个单位一个比较常见的使用场景是在中文段落的首段缩进两个字。即：

p {
  text-indent: 2em;
}

建议在设置字体单位和行距的时候采用em，这样用户在缩放网页的时候，能保证字体的正常缩放。

rem

rem(font size of the root element)和em有点类似，不过是相对根元素进行计算的。只要在html元素上指定了其font-size大小，后面的元素都将使用这个大小作为基准进行计算。兼容性方面，目前除了IE8之外，所有浏览器基本都已支持rem了。不过有时候为了兼容性，会采用这种写法：

p {
  font-size: 16px;
  font-size: 1rem;
}

这样，当浏览器不支持该属性的时候，会自动忽略掉rem设定的大小。

这个单位目前也经常被用来做屏幕适配。可以利用媒体查询或者js代码来动态设置根元素的font-size，后续的元素采用rem单位，这样就可以保证在不同设备下的显示效果。具体可以参考http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/。

ex

相对于元素字体的x-height， 这个x-height取自字符x的高度的意思。与em有所区别的是，当你改变字体font-family的时候，使用em单位的其大小不会受到影响，而ex会根据字体重新计算出新的大小。

ch

与ex单位有点类似，不过是基于'0'这个字符字体的宽度，而不是x这个字符字体的高度进行计算的。

基于viewport视区的长度单位

视区（viewport)，就是浏览器可视化的区域，这个可视区域是window.innerWidth/window.innerHeight的大小。而CSS中，和视区相关的单位有四个，分别为vw,vh,vmin和vmax。这些单位都依赖屏幕的可视区域，因此也可以用于响应式排版和布局。

vw/vh

vw是viewport's width的简写，表明它的值是根据视口的宽度计算而来的，换算关系是1vw等于百分之一的window.innerWidth。与vw类似，vh是根据视口高度计算出来的。

vmin/vmax

这个单位是根据视区中长度偏大的那个维度值计算出来的，就是如果window.innerHeight > window.innerWidth则vmin取百分之一的window.innerWidth，vmax取百分之一的window.innerHeight计算。

作者：SCQ000
链接：https://www.jianshu.com/p/5d1f811082f2
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。