css中的那些单位

除了像素px之外，css中还有很多单位，像em或者rem这两个我们可能一部分人用到过，像vm,vh以及vmin和vmax可能用过的人就不是很多了。现在我们就来逐一的介绍一下。

1、单位em

em常用于字体大小的设置，其为想对单位。参照为其父元素的字体大小。

1 2	.parent{font-size:10px} .chilid{font-size:1.2em}

此时子元素中字体大小为1.2*10=12px;

r意为root,所以子元素参照对象为html。

1 2	html{font-size:10px} .chilid{font-size:1.2em}

此时子元素中字体大小为1.2*10=12px;

##单位vw,vh
通常我们做响应式设计都喜欢用百分比，但很多时候百分比并不是最好的选择，因为元素的百分比是相对于父元素的。如果可以相对视窗那就会方便很多。我们的vw,vh就是这样提供方便的单位。

其中1vh 等于1/100的视口高度。假如浏览器高度为900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。

.slide {
    height:
    100vh;
}

通过这行代码，我们就能实现高度自适应。占满整个屏幕。此时如果我们的字体采用vw为单位，那么字体就会根据窗口的改变而改变，实现字体的自适应。是不是很棒呢！！！

vmin是相对于浏览器的宽度高度中最小的那个计算。

vmax则相对于浏览器宽度高度中最大的那个计算。

如果浏览器的宽为700px,高为800px.那么其1vmin=700/100=7px;1vmax=800/100=8px;

如果我们想让一个div大小总是小于浏览器窗口，那么这样设置就可以做到

1	div{widhth:100vmin;height:100vmin}

如果我们想让一个div铺满整个浏览器，则可以这样设置：

1	div{widhth:100vmax;height:100vmax}

其兼容性如下：