关于css中长度与角度单位总结

习惯了用px单位布局的童鞋们注意了，随着h5应用越来越广泛，适配各种设备及应用场景越来越复杂，仅仅用px布局已经力不从心，你需要了解掌握更多关于css的长度角度单位，本篇博文参考css官方文档对css中所有的长度角度单位进行整理，包括浏览器的支持情况；

长度单位

长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有：em,ex,ch,rem,vw,vh,vmax,vmin
绝对长度单位包括有：cm,mm,q,in,pt,pc,px

em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
所有浏览器均支持。

ex
相对长度单位，相对于字符“x”的高度。通常为字体高度的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
所有浏览器均支持。

ch
数字“0”的宽度，相对于当前数字0字体调小的宽度
浏览器兼容不好，不推荐使用

rem
做移动开发的会很熟悉，相对长度单位，相对于根元素(即html元素)font-size计算值的倍数

现代浏览器基本都支持

vw
相对于视口的宽度，视口被均分为100单位的vw

h1 {
	font-size: 8vw;
}
如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

现代浏览器都支持

vh
相对于视口的高度。视口被均分为100单位的vh

扫描二维码关注公众号，回复： 8654812 查看本文章

h1 {
	font-size: 8vh;
}
如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

vmax
相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

IE不支持（包括11）

vmin
相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

h1 {
	font-size: 8vm;
	font-size: 8vmin;
}
如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

cm
厘米（Centimeters），绝对长度单位
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 96px
所有浏览器均支持

mm
毫米（Millimeters），绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 96px
所有浏览器均支持

in
英寸（Inches)，绝对长度单位
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 96px
所有浏览器均支持

pt
点（Points），绝对长度单位
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 96px
所有浏览器均支持

px
相对长度单位，像素（Pixels）
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
所有浏览器均支持

-----------------------------------------------------------------------------------------------------

角度单位

deg
度（Degress），一个圆共360度
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

现代浏览器均支持

grad
梯度（Gradians）。一个圆共400梯度
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
现代浏览器均支持

rad
弧度（Radians）。一个圆共2π弧度
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
现代浏览器均支持

turn
转、圈（Turns）。一个圆共1圈
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
现代浏览器均支持