CSS3长度单位总结

发表于   |   分类于   |  

前几天写一个界面的时候这个界面的宽高需要自适应浏览器的宽高。宽度用百分比写还好，但是高度用百分比写太难受了，只要有一个父元素没写就不起作用。并且用100%总感觉怪怪的。之后找了下发现css3的长度vh可以完美解决我的问题。顺带把其他css3的长度单位用法好好总结下。
css3提供了以下几个长度单位，ch、rem、vw、vh、vm。下面一个个说它们的用法。

em

em是一个相对单位，基准是父节点的字体大小。div中的font-size为16x2=32px，div中的span的font-size为16x2x3=96px。

1
2
3
4
5
6
7
8
9
body {
	font-size: 16px;
}
div {
	font-size: 2em;
}
div span{
	font-size: 3em;
}

rem

rem也是一个相对单位，基准是根节点html的字体大小。’r’可以理解为’root’。div中的font-size为16x2=32px，div中的子元素span的font-size为16x3=48px。

1
2
3
4
5
6
7
8
9
body {
	font-size: 16px;
}
div {
	font-size: 2rem;
}
div span{
	font-size: 3rem;
}

vw

vw即’viewpoint width’，1vw的长度为浏览器宽度的1%。

vh

vh即’viewpoint heihgt’，1vh的长度即为浏览器高度的1%。

vmin和vmax

vmin为vw和vh中较小的那个，vmax为两者中较大的那个。

ch

ch以根节点字体中’0’为基准，1ch的长度即为’0’的宽度。找不到时为0.5em。