CSS 长度单位


绝对单位(全部是基于css像素// 认为屏幕分辨率总是 96dpi(viewport 尺寸 / 设备尺寸,在非96dpi显示器上就不准确了,浏览器里面永远不知道显示器尺寸):

px
对于屏幕显示,通常是一个设备像素(点)的显示。
打印机和高分辨率的屏幕一个CSS像素意味着多个设备像素,因此,每英寸的像素的数量保持在96左右。
mm
One millimeter.
q
A quarter of a millimeter (1/40th of a centimeter). 1/4毫米
cm
One centimeter (10 millimeters).
in
One inch (2.54 centimeters).
pt
One point (1/72th of an inch). // 磅,点
pc
One pica (12 points). // 派卡



相对单位:
%
相对于关联属性值,margin-父元素宽高(元素定位,再继承属性),border-宽高值(内容定位),font-继承属性计算值,line-height-font计算值
vh,vw,vmin,vmax,vi,vb
1% 视口比例长度,@page中不可用 // mdn 上是说 viewport's initial containing block
// 前缀加 l 表示 Large Viewport Units
// 前缀加 s 表示 Small Viewport Units
// 前缀加 d 表示 Dynamic Viewport Units
cq{i,b,w,h,max,min}
基于容器
ex
这个单位表示"X"字母的高度;1ex≈0.5em很多字体。
ch
这个单位表示字形的"0"(零,Unicode字符u+0030)的宽度。在等宽字体时可以控制字符串宽度。
rem
这个单位是"字体大小"的根元素(例如"HTML")字体大小。当用在在这个根元素,它代表了它的初始值。
一般是 16px,在根元素设置成 62.5% 1rem 就是 10px,之后使用 rem 单位方便对齐设计稿
em
这个单位表示元素的 font-size 的计算值。如果用在font-size 属性本身,它代表元素的继承font-size。
lh,rlh
这个单位表示元素的 line-height 的计算值