理解前端尺寸 rem ，vh , vw , %的本质

版权声明：将遇到的问题，记录下来，方便自己也方便大家。 本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/y491887095/article/details/80162284

rem、百分比、vh、vw各种布局方式，在兼容不同分辨率的时候，究竟采用哪种方式比较好呢？

名词介绍：

百分比：就是元素相对于父级的宽度或高度的百分比，比较常用，宽度和高度都可以

rem:本身是百分比的一种变形，但是这个单位只是基于宽度的百分比，不是基于高度的百分比

vh、vw：基于视口的尺寸，1vh = 1% viewportHeight , 1wh = 1% viewportWidth

计算公式（证明rem本身就是百分比）：

假设我们有4:3的屏幕（1920*1080），还有16:9的屏幕（3840*2160）。

设：w = 0.3rem，h = 0.3rem;

docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';

在1920*1440的屏幕上：
w = 300px , h = 300px;

w/width = 300/1920 = 15.625%
h/height = 300 / 1440 = 20.8%

在3840*2160的屏幕上：
html根节点上的font-size此时会变成200，扩大了两倍。也就相当于w、h扩大了两倍。
w = 600px , h = 600px;

但是，如果除以各自的基础属性，我们发现百分比没有改变，或者可以理解为，rem的值与视口的宽度，均等比例的放大了。


w/width = (2*300)/(1920*2) 
h/height = （2*300）/ (2*1080) = 27%

结论：

明显，如果使用rem，相当于使用了百分比布局。
在宽度方面，采用rem和百分比都是OK的，
高度方面，不建议采用rem，因为rem是以宽度为基准的。
当然如果将要适应的屏幕都是等比例放大的，比如2K屏幕，扩展到4K屏幕，那么高度也可以考虑用百分比。

1、无限增长：传统的HTML页面（类似淘宝这样的页面）
解决方案：100%和rem结合起来用。
页面整体布局时，页面容器的高度建议设置为100%，具体到某个元素的高度，他的高度可以通过rem设置。

2、单屏页面：页面高度和屏幕内容显示区域的高度相同（单页展示页面）
考虑用百分比来做宽、高，如果做高度时嫌麻烦，可以使用vw、vh做布局。