除了像素px之外,css中还有很多单位,像em或者rem这两个我们可能一部分人用到过,像vm,vh以及vmin和vmax可能用过的人就不是很多了。现在我们就来逐一的介绍一下。
1、单位em
em常用于字体大小的设置,其为想对单位。参照为其父元素的字体大小。
|
|
此时子元素中字体大小为1.2*10=12px;
单位rem
r意为root,所以子元素参照对象为html。
|
|
此时子元素中字体大小为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。
|
|
通过这行代码,我们就能实现高度自适应。占满整个屏幕。此时如果我们的字体采用vw为单位,那么字体就会根据窗口的改变而改变,实现字体的自适应。是不是很棒呢!!!
vmin和vmax
vmin是相对于浏览器的宽度高度中最小的那个计算。
vmax则相对于浏览器宽度高度中最大的那个计算。
如果浏览器的宽为700px,高为800px.那么其1vmin=700/100=7px;1vmax=800/100=8px;
如果我们想让一个div大小总是小于浏览器窗口,那么这样设置就可以做到
|
|
如果我们想让一个div铺满整个浏览器,则可以这样设置:1div{widhth:100vmax;height:100vmax}
其兼容性如下: