前端常用的度量单位

rem

rem被定义为相对于当前对象内文本的字体大小；如果你给body元素设置了一个字体大小，那么body元素的任何子元素的em值都等于body设置的font-size;

<body>
    <div class='demo'>demo</div>
</body>
<style>
    body {
      font-size:14px;
    }
    .demo {
        font-size:1.2em;// calculated at 14px * 12, or 16.8px;
    }

</style>

注：
div中的找字体大小是1.2em,即div从父类元素继承字体大小的1.2倍；此处， body 的字体是14px,那么div的字体大小：12* 14 = 16.8px；
需要注意的是：em的单位大小和当前元素的父元素的字体大小有着直接的关系，具体情况如下：

<body>
    <div>
          Demo <!-- 14 * 1.2 = 16.8px; -->
          <div>
                Demo1 <!--  16.8 *1.2 = 20.16px -->
                <div>
                        Demo2 <!-- 20.16 * 1.2 = 24.192px -->
                </div>
          </div>
    </div>
</body>

虽然在某些情况下，可能会需要用到这种效果，但是通常情况下我们一般用的还是单一的相对单位就好； rem：表示的就是根据根元素设置字体的带下，一般情况下根元素指的都是html;具体如下：

html {
  font-size:14px;
}
div {
  font-size:1.2rem;
 }

此时上面演示代码中嵌套的div中的字体大小就都是： 14 px 1.2 = 16.8px；

rem 不仅仅能适用于设置字体的大小，也可以用于页面布局；即你阔以用基于html根元素字体大小的rem作为整个页面或ui库的大小单位，然后在其他特定的地方用em单位，这样将会给你带来更多的便利；代码如下：

html {
  font-size:14px;
}
.box {
  width:70rem; // 14px * 70  = 980px;
}

vh 和vw

*vh和vw主要是用来描述当前视口的单位；1vh表示1%的视口高度；如果浏览器的高度是900px,那么1vh = 900px * 1% = 9px；同样如果视口的宽度是750px,那么 1vw = 750px * 1% = 7.5px；

通过vw和vh可以很容易实现盒子和屏幕等高和等宽

 .con {
    height:100vh;
    width:100vw;
}

如果想让页面中的字体会自动根据浏览器的宽度进行缩放，只需要将元素的font-size的单位设置为vw就阔以；代码如下：

  <h2>how are you?</h2>
  <div>
          demo
</div>

  body {
    background:red;
    padding:1% 0;
    color:'#fff';
 }
  h2 {
    font-size:4vw;
  margin-bottom:.2em;
}

vmin 和vmax

vmin和vmax是相关于视口高度和宽度两者的最小和最大值；

如果浏览器的高宽分别为700px和1100px,则2vmin=7px,1vmax=11px;如果高度分别是1080px和800px,则1min=8px,1vmax = 10.8px;
适用情况：如果需要一个元素始终在屏幕可见，则只需要在为其宽度和高度都使用vmin单位，并赋予其低于100的值就可以做到；例如，可以这样定义一个至少有两边触摸到屏幕的方形；代码如下：

.box {
  height:100vmin;
  width:100vmin;
}

如果需要让这个方形始终铺满整个视口（四边始终触摸到屏幕的四边）

 .box {
    height:100vmax;
    width:100vmax;
  }

最后编辑于：2019.06.10 23:45:51