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

大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网css任务3，深度思考中的知识点——px、em、rem、%、vw、vh、vm等单位有什么区别？

一.背景介绍

我们在做css任务的时候经常会看到也会用到的一些长度单位。传统的单位有：px、%、em，而随着技术的发展，css3增加了一些新的单位rem、vh、vw、vm等，使我们的web页面能适应各种不同的终端显示，现在我们来看看这些单位的区别。

二.知识剖析

一般而言，pixel（像素）是图像的基本采样单位。所以它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念,单位面积内的像素，可大可小,是相对于显示器屏幕分辨率而言的.用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破.

em相对长度单位。em是相对于父元素的font-size而计算的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体(16px)尺寸。

em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值。注意：谷歌浏览器强制最小字体为12号，即使设置成10px最终都会显示成12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。

%一般来说是相对于父元素来讲，但有特殊情况：

1、如果用来设置字体，相对的是父元素的字体大小，大多数浏览器中默认的字体尺寸是100%。

2、如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

viewpoint height，视窗高度，1vh等于视窗高度的1%。如果浏览器的高是800px, 1vh为8px。

viewpoint width，视窗宽度，1vw等于视窗宽度的1%。如果浏览器的宽是500px, 1vw为5px。

尽管%和vw在很多地方都很相似 在使用的过程中还是要注意 在出现竖向滚动条的时候vw=%+滚动条的宽度

vmin and vmax

视口高度和宽度两者的最小值或者最大值

比如，浏览器的宽度设置为1200px，高度设置为800px，1vmax = 1200/100px = 12px，1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1000px, 1vmin就等于6px, 1vmax则等于10px。

三.常见问题

自适应布局的时候为什么要给html的CSS样式设置font-size为62.5%或者625%？

四.解决方案

任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px。不过em是相对于父元素的 有一定的限制 现在基本都使用rem为了简化font-size的换算，所以需要在html根元素中声明Font-size=62.5%，这就使1rem值变为16px*62.5%=10px,这样12px=1.2rem,也就是说只需要将你的原来的px数值除以10，然后换上rem作为单位就行了。

五.编码实战

六.拓展思考

除了这些单位还有什么其他的单位？

七.参考文献

http://blog.csdn.net/jyy_12/article/details/42557241

八.更多讨论

课件PPT

px、em、rem、%、vw、vh、vm等单位有什么区别？_腾讯视频