CSS相对单位详情指南CSS相对单位详情指南单位名称说明 em em 相对于当前元素的字体大小 rem root

CSS相对单位详情指南

单位	名称	说明
`em`	em	相对于当前元素的字体大小
`rem`	root em	相对于根元素（通常是 `<html>`）的字体大小
`%`	百分比	相对于父元素的大小
`vw` / `vh`	视口宽度/高度	相对于浏览器窗口的宽度或高度
`vmin` / `vmax`	最小/最大视口边长	根据视口尺寸变化

详细讲解每个单位

em

em 最适合在需要 相对于当前字体大小进行缩放 的场景中使用

如果 em 用在 font-size 上，它会以父元素的 font-size 作为基准：、

父元素font-size为20px，子元素font-size为2em，那么计算结果为2*20px = 40px
```
.parent {
  font-size: 20px;
}

.child {
  font-size: 2em; /* 2 × 20px = 40px */
}
```
若em用在其他属性上，如margin、padding、width等，它会以当前元素的font-size作为基准

当前元素的font-size为20px，width为5em，那么width的计算结果为 5 * 20px = 100px
```
    <style>
        .container {
            width: 10em;
            height: 10em;
            background-color: pink;
            font-size: 20px;
        }
    </style>
    <div class="container">
        name: 张三
    </div>
```
如果元素嵌套多层，并且每一层都使用 em，则计算会逐层累积

rem

rem是相对于根元素（<html>）的字体大小进行计算。默认情况下，大多数浏览器的根字体大小是16px，所以1rem = 16px。

rem不会向em那样由联级计算的问题，整个文档中使用rem的单位都基于同一个基准值，整个文档中使用rem的单位都基于同一个基准值

    <style>
        html {
            font-size: 10px;
        }
        .container {
            width: 20rem;
            height: 20rem;
            font-size: 2rem;
            background-color: #ccc;
        }
    </style>
    <div class="container">
        name: 张三
    </div>

% 百分比

使用百分比设置的大小是相对于父元素的，一般常用于设置宽高、边距等。

    <style>
        .container {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .child {
            width: 50%;
            height: 50%;
            background-color: pink;
        }
    </style>
    <div class="container">
        <div class="child">
            我是50%
        </div>
    </div>

`vw` 和 `vh`

1vw = 视窗宽度的1%，1vh = 视口高度的 1%，全屏布局、响应式设计

铺满全屏的效果如下：

* {
    margin:0;
    padding:0;
}
.full-screen {
  width: 100vw;  /* 宽度等于浏览器窗口宽度 */
  height: 100vh; /* 高度等于浏览器窗口高度 */
}

`vmin` 和 `vmax`

1vmin = 视口宽和高中较小的那个的 1%，1vmax = 较大的那个的 1%。适用于让元素在不同设备上保持比例

<style>
   * {
     margin: 0;
     padding: 0;
   }
   .container {
     width: 50vmin;
     height: 50vmin;
     background-color: pink;
   }
</style>
 <div class="container"></div>
 <script>
   console.log("width", document.documentElement.clientWidth);
   console.log("hegith", document.documentElement.clientHeight);
 </script>

当视窗宽度为404，高度为703时。这是宽度比高度小，50vmin以404为基准来计算，结果为202

CSS相对单位详情指南

CSS相对单位详情指南

详细讲解每个单位

vw 和 vh

vmin 和 vmax

`vw` 和 `vh`

`vmin` 和 `vmax`