CSS度量单位rem、em、vw、vh详解

旧城等待， 2022-05-19 06:52 401阅读 0赞

# CSS度量单位rem、em、vw、vh详解 #

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>说明</th> 
   <th>兼容性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>em</td> 
   <td>相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化</td> 
   <td>良好</td> 
  </tr> 
  <tr> 
   <td>rem</td> 
   <td>相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响</td> 
   <td>IE9+、火狐 3.6+、 safari5.0+</td> 
  </tr> 
  <tr> 
   <td>vw</td> 
   <td>相对于视口的宽度， 视口被均分为 100 单位的vw</td> 
   <td>高版本浏览器均支持</td> 
  </tr> 
  <tr> 
   <td>vh</td> 
   <td>相对于视口的宽度， 视口被均分为 100 单位的vh</td> 
   <td>高版本浏览器均支持</td> 
  </tr> 
 </tbody> 
</table>

### 1、em ###

相当于“ 倍” ，比如设置当前的 div 字体大小为 1.5em，则当前的 div 的字  
体大小为：当前 div 继承的字体大小\*1.5 倍。  
代码：

效果：  
![20180722105404.png][]  
说明：  
单位 em 是随着父元素大小的变化而变化，div 是 p 的父元素，p 是  
span 的父元素，所以 p 标签的大小受制于 div 标签，span 标签的大小受制  
于 p 标签，不受制于 div 标签。  
div 标签的字体大小是 20px，p 标签的大小是 40px，span 标签的字体大小  
是 20px

### 2、rem ###

这里的 r 是 root 的意思，就是相对于根节点来进行缩放，如果有嵌套的关  
系，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放  
代码：

效果：  
![20180722105651.png][]  
说明:  
rem 单位是根据根节点的大小来设置的，也就是根据 html 的大小来  
设置的，跟父元素没有关系，所以 p 标签的字体大小是 16px，span 标签的  
字体大小是 8px。

### 3、vw 和 vh ###

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于  
屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的  
话 vh 单位更好。  
代码：

效果：  
![20180722105949.png][]  
说明：  
1 个 vw 相当于页面宽度的 1%，比如页面宽度是 1000px，那么 1vw  
就是 10px，vh 同理。  
P 标签的宽度是 50vw，所以就是页面宽度的 50%，高度是 50vh，所以就  
是页面高度的 50%。

### 4、vmin 和 vmax ###

关于视口高度和宽度两者的最小值或者最大值。  
比如，浏览器的宽度设置为1200px，高度设置为800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。

有一个元素，你需要让它始终在屏幕上可见：

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

![20180722110528.png][]  
如果你要让这个元素始终铺满整个视口的可见区域：

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

![20180722110604.png][]

[20180722105404.png]: /images/20220519/eed0b09a4dab4c84a3d5a3f2ad29f8bb.png
[20180722105651.png]: /images/20220519/f9752d01fa234a8d9a17558c33ea1a92.png
[20180722105949.png]: /images/20220519/4783864af5be4ed8baffdf5e2f282939.png
[20180722110528.png]: /images/20220519/038b7f7cbf534c6186235fc69373efe0.png
[20180722110604.png]: /images/20220519/ac3c8012aa984d37b0ad4baa43bfdb4b.png