js视口及【vw,vh,em,rem】 的简单概述

文章目录
        一、视口是什么？
        二、vw,vh,em,rem 简单概括

一、什么是视口？
视口代表当前可见 (就是你看见的那块区域) 的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。

概括地说，视口基本上是当前文档的可见部分。

二、概括
 em
- 相对于父级元素的字号为标准计算“倍数”。

- 嵌套关系都使用em，会逐级相乘 例如：16px * 2 * 1.5 */

- em是相对长度单位。相对于当前对象内本文的字体尺寸（如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px），这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便我们计算。

rem
 rem：相对于根元素“html” 的字号为标准计算“倍数”。

vw vh
- vw把视口的宽度分成100份，其中1vw代表一份

- vh把视口的高度分成100份，其中1vh代表一份

- 和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

- vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个