CSS布局单位之em、rem、vw和vh

CSS布局单位

一、em与rem

em

em与rem不同于px，都是相对长度单位。
em的参考对象是父元素的font-size，其中浏览器默认的font-size是16px。当前元素设置了font-size时，则以当前元素的font-size为参考对象。

.father {
	/* em是相对父元素来说的 */
	 /* 父元素没有定义font-size则参考自己的font-size */
	 font-size: 100px;
	 /* 字体默认大小是16px */
	 width: 2em; // 200px
	 height: 2em; // 200px
	 background-color: burlywood;
	}
        
.son {
    font-size: 1.5em; // 150px
    width: 2em; // 300px
    height: 2em; // 300px
    background-color: cornsilk;
}

rem

rem参考的是根元素即html元素的font-size。

html {
    font-size: 10px;
}

.son {
    /* 100px */
    font-size: 10rem;
    width: 10rem;
    height: 10rem;
    background-color: cornsilk;
}

二、媒体查询

结合rem实现自适应布局大小改变
媒体特征不要连着写，如and (min-width: 320px) and (max-width: 320px)这样写没有效果。。。
最大值要从大=>小的顺序
最小值要从小=>大的顺序

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}


.father {
    width: 20rem;
    height: 20rem;
    background-color: burlywood;
}

.son {
    /* 100px */
    font-size: 10rem;
    width: 10rem;
    height: 10rem;
    background-color: cornsilk;
}

三、vw、vh

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
1vw = 1% 视口宽度
1vh = 1% 视口高度
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

视口

这里讨论的是移动端的视口：

Layout Viewport（布局视口）

是一个虚拟的窗口，其大小比手机屏幕大，加载网页时，直接把HTML渲染在这个虚拟的窗口中。

layout viewport的大小获取：

document.documentElement.clientWidth
document.document.clientHeight

Visual Viewport（视觉视口）：

视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。

视觉视口的获取：

window.innerWidth
window.innerHeight

Ideal Viewport（理想视口）：

为了将一个页面在移动端上完美显示，不再进行缩放，不再渲染到大的布局视口上，于是将布局视口的值设置为视觉视口的宽度，这样就可以完美显示了，称之为理想视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">