CSS新增单位

CSS3 新增的单位：**vh、vw、vmin、vmax**

*  vw 和 vh

    1、1vw 等于1/100的视口宽度 （Viewport Width）

    2、1vh 等于1/100的视口高度 （Viewport Height）

   

    例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度为750， 1vw = 750px/100 = 7.5 px。

```css

.slide {

    height: 100vh; // 只用一行CSS代码就实现同屏幕等高的框

}

```

* vmin 和 vmax

    1. vmin — 是vw和vh中较小的值。

    2. vmax — 是vw和vh中较大的值。

场景：这个单位在横竖屏的切换中

例子：浏览器高度900px, 1 vmax= 900px/100 = 9 px。同理，如果视口宽度为750， 1 vmin = 750px/100 = 7.5 px。

例子：vh = 100,vw= 90。1 vmin = 90vw,1 vmax = 100vh

* rem  、em 、px

  1、rem— 相对于html/body字体的大小。

  2、em— 是相对于父级字体的大小。

  3、px— 是相对于显示器屏幕分辨率字体的大小。

  例子：浏览器body字体是12px, 1 rem= 12 px ，这里父级是body 1 em =  12 px 。

-end-