rem、vw、vh使用方法

rem vw vh 

rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。

1，vw、vh 的含义
（1）vw、vh 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗大小来决定的，单位 1，代表类似于 1%。
视窗是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

（2）具体描述如下：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

2，vw、vh 与 % 百分比的区别
（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

rem：相对于页面的整体缩放过程

1rem = 1/100 × 页面的宽度

从ue图到rem的转换 ue图的元素 / ue图的宽度 × 100

注意 这里的1/100是将

document.documentElement.style.fontSize
字体的大小设置为宽度的1/100 就是最外根元素的字体的大小=1rem 和em有所不同

利用

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + ‘px’;
来进行设置

vw：理解为宽度的1/100（CSS3）

vh理解为高度的1/100(CSS3)

 CSS核心代码：
 html{font-size:10px}