浅谈em/rem/vh/vw 的区别和联系

em和rem

em的特点
- em的值不是固定的，具有继承性；
- em继承于父类元素font-size字体大小；
rem的特点
- rem根据html根元素计算
- 如果html根元素没有定义，则根据浏览器默认值16px计算

em和rem的区别

rem跟随根元素改动而改动;em跟随父元素改动而改动

<style>
  body {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.8em;
  }
  span {
    font-size: 1.2em;
  }
  li {
    font-size: 1.2rem;
  }
</style>
</head>
<body>
<!-- 根元素body: 1.5*16px= 24px ; h2:1.8*24px=43.2px; span:1.2*43.2px=51.84px -->
<h2>这里是h2元素<span> 这里是span元素 </span></h2>
<p>这里是P元素</p>
<!-- li元素:1.2*16px=19.2px -->
<li>这里是li元素</li>
</body>

代码效果如下图：

em和rem的应用场景
- 一般定义子元素的font-size值用rem；其他元素可以用em

vh和vw

vw是相对视口的宽度而定的，长度等于视口宽度的1/100

例如视口宽度是900px，那1vw=9px
vh是相对视口的高度而定的，长度等于视口高度的1/100

例如视口高度是500px，那1vh=5px

vmin和vmax

vmin：取当前Vw和Vh中较小的那一个值

<style>
    div {
      width: 80vmin;
      height: 80vmin;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div></div>
</body>

代码如图：

vmax：取当前Vw和Vh中较大的那一个值

<style>
      div {
        width: 80vmax;
        height: 80vmax;
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>

代码如图：

em和rem

vh和vw

vmin和vmax

相关文章