px、em、rem、%、vw、wh、vmin、vmax等单位有什么区别？

冷不防 2022-04-18 03:02 135阅读 0赞

原文出处：[https://blog.csdn.net/jnshu\_it/article/details/77161717][https_blog.csdn.net_jnshu_it_article_details_77161717] (本文有修改）

### 1.背景介绍 ###

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vmin、vmax等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。

### 2.知识剖析 ###

**1、px**

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

**2、em**

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

**3、rem**

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。  
（坑：当html的font-size 小于12px时，rem计算的结果不对。原因见《[浏览器字体大小的坑][Link 1]》）

**4、%**

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

**5、vw**

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

**6、vh**

css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

**`7`、`vmin   (`兼容性较差)**

css3新单位，当前较小的vw和vh

**`8`、`vmax  (`兼容性较差)**

css3新单位，当前较大的vw和vh

### 3.注意 ###

1、vh vw 是不包含页面滚动条的视窗宽度(innerwidth)

2、% 包含了滚动条的宽度在里面了(outerwidth)。

一般的情况下%就可以满足大部分自适应设计的需求，可以用height：100vh做一个高度占满屏幕的自适应，没有滚动条。

用vw，vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。  
  
【补充：用rem时要注意】  
当html的font-size 小于12px时，rem计算的结果不对，编大，这是Chrome运行的效果  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

反而遭人嫌弃的IE没有这个问题， 见下图  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1][]

--------------------

要想知道各个单位的兼容性问题可能去：[https://caniuse.com][https_caniuse.com] 进行查询

[https_blog.csdn.net_jnshu_it_article_details_77161717]: https://blog.csdn.net/jnshu_it/article/details/77161717
[Link 1]: https://blog.csdn.net/chelen_jak/article/details/83856187
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20220418/f12ef68cb34c4a2d9483da3a60243ee3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1]: /images/20220418/6d73d8c9c51148b4acdbfe198873d2c6.png
[https_caniuse.com]: https://caniuse.com/