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

痛定思痛。 2022-05-26 12:09 93阅读 0赞

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是以宽度为基准的。  
其实高度也是可以用rem的，因为高度是基于宽度的比例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0OTE4ODcwOTU_size_16_color_FFFFFF_t_70]  
当然如果将要适应的屏幕都是等比例放大的，比如2K屏幕，扩展到4K屏幕，那么高度也可以考虑用百分比。

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

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

用vw的作为单位，在移动端适配性很好。

@function px2vw($n) {
      @return ($n / 7.5) * 1vw;
    }

举个栗子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0OTE4ODcwOTU_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0OTE4ODcwOTU_size_16_color_FFFFFF_t_70]: /images/20220526/b46fb7caebf74a0a9fd5ee635ab0d748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0OTE4ODcwOTU_size_16_color_FFFFFF_t_70 1]: /images/20220526/481c28d59b9a4283b2fd29d3e009e1f9.png