习惯了用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
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
现代浏览器均支持