CSS的长度单位。
一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括:相对单位和绝对单位。
相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有: cm, mm, q, in, pt, pc, px
1、vh、vw
有点像width和height属性,v(viewpoint)也就是说vh、vw直接对应的是当前视口的尺寸。
width:100vh;
height:100vh;
width:100%;
height:100%;
以上两种表达有什么区别呢。如果浏览器高度为1000px,宽度为800px,那么1vh=1000/100=10px,1vw=800/100=8px;而%要受到父元素的约束,并不能直接根据浏览器的尺寸计算。
2、vmin、vmax
vmin表示当前宽和高的小者,vmax则表示当前宽和高的大者。
3、em、rem
em同样是个相对大小的单位,下面是css3参考手册中的解释
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
rem
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
来自梦柯网的例子
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
Test
Test
Test
也就是说这样设置的话,每层都要看它的父元素,而这并不总是我们想要的,rem可以来补充em不足。
r(root)通常指标签,也就是只要用rem作为单位,都会以标签的设置为基础。
4、ex
相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
5、ch,是CSS3新增单位,有少部分浏览器不支持,如Android browser
数字“0”的宽度
6、px
相对长度单位。像素(Pixels)。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
7、q
1/4毫米(quarter-millimeters)。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
8、in
英寸(Inches)。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
9、pt
点(Points)。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
10、pc
派卡(Picas)。绝对长度单位。相当于我国新四号铅字的尺寸。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
11、cm/mm
厘米/毫米