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

大家好，我是IT修真院上海分院第7期的学员，一枚正直纯洁善良的web前端。今天给大家分享一下，px、em、rem、%、vw、wh、vm等单位有什么区别？希望能够给大家带来一些收获和思考。

目录

1.背景介绍          

2.知识剖析           

3.常见问题

4.解决方案        

5.编码实战       

6.扩展思考         

7.参考文献      

8.更多讨论

1.背景介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但从css3开始，浏览器增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来认识一下这些长度单位。

2.知识剖析   

px：是显示屏上显示的每一个小点,为显示的最小单位。这个长度与您正在看的显示屏中的文字屏幕像素没有任何关系。

px像素（Pixel）值是固定的，不会随着屏幕宽度变而变。

em:是相对单位。em其实就是一种排版的测试单位.

在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：如果字体大小是16px，那么1em=16px。在所有现代浏览器中，其默认的字体大小就是“16px”。但自身如果定义了font-size大小则按照自身来计算，也就是说整个页面内的em值并非完全一样。

rem:是一个相对的单位，像em，但它总是相对于“根”元素html的字体大小来计算。em和rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作。

%(percentage)以百分比形式设置的长度基于父元素的相同属性的长度。例如，如果一个元素以450px宽度呈现，宽度设置为50％的子元素将呈现225px。

vw-这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。

vh-这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。

3.常见问题

css样式body的font-size为什么要设置625%？

4.解决方案  

16px62.5%=10px.*   设了62.5%后就有1em = 10px，这样有利于进行换算。

 为什么要设置成625%？

 设置html 625% rem单位的根元素是相对于html body可以设置14px 或者16px 来设置网页的默认字体大小消除625%大小属性继承给body带来的影响

5.编码实战  

demo地址

7.参考文献   

https://www.w3cplus.com/css/px-to-em

https://css-tricks.com/the-lengths-of-css/

8.更多讨论