大家好，我是IT修真院上海分院第1期的Web学员刘洪利，今天给大家分享一下关于css中px % em rem vw vh vm这些长度单位的区别
1.背景介绍
在编写Web网页中，长度单位是非常常用的一个单位。通过设置长度单位对页面的内容进行调整，来达到符合要求或者说看上去舒服的效果排版效果。传统的单位有：px、%、em，而随着技术的发展，css3增加了一些新的单位rem、vh、vw、vm等，使我们的web页面能适应各种不同的终端显示，现在我们来去看下他们的意义和不同点。
2.知识剖析
2.1.px
px是Pixel的缩写，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。
2.2.百分比%
百分比%就是相对于父元素尺寸来进行计算的，比如定义两个div元素,div1包含div2,设置父div1的width为100px,子div2的width为50%,则实际上计算的结果就是：子div2的宽度是100px*50% = 50px。
1、如果用来设置字体，相对的是父元素的字体大小，大多数浏览器中默认的字体尺寸是100%。
2、如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。
2.3.em
相对长度单位。em是相对于当前对象内文本的字体尺寸而计算的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体(16px)尺寸。也就是1em=16px。
2.4.rem
rem和em很像，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，从而统一整个页面的长度，只要改动根元素HTML的字体大小就可以统一比例的改动页面中所有使用rem作为长度单位的元素，而不会造成页面内布局错位。
需要注意的是，我们经常用的谷歌浏览器会强制页面的最小字体为12号，即使设置成 10px 最终都会显示成12px。既然html{font-size：62.5%}办不到，那换个思路，将html{font-size：625%}就好了，与html{font-size：62.5%}思路相同，只不是时将1rem = 10px，更正为1rem = 100px而已。
2.5.vw
vw是视窗宽度单位。1vw等于可视区宽度的百分之一。如果浏览器的宽是 500px, 1vw求得的值为 5px 。
2.6.vh
与vw意义相同，同样是将视窗作为参考值，不同的是vh是视窗高度单位。1vh等于可视区高度的百分之一。如果浏览器的高是 800px, 1vh 求得的值为 8px 。
2.7.vm
严格来说，vm并不是长度单位，他是vmax和vmin这两个长度单位的一个总称
2.7.1.vmax
vmax是相对于视窗的宽度或高度的百分之一，取决于哪个更大。在宽为500px高为800px分辨率的显示器下1vm=8px。
2.7.1.vmin
vmin是相对于视窗的宽度或高度的百分之一，取决于哪个更小。在宽为500px高为800px分辨率的显示器下1vm=5px
3.常见问题
Q: 为什么给body的CSS样式设置font-size为62.5%？
4.解决方案
A: 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。为了简化font-size的换算，所以需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
5.扩展思考
除了这些单位还有什么其他的单位？
ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pt：点（Point），绝对长度单位。大约1/72寸.
pc：派卡（Pica），绝对长度单位。大约6pt，1/6寸,相当于我国新四号铅字的尺寸。
in：英寸（Inch），绝对长度单位。
mm：毫米（Millimeter），绝对长度单位。
cm：厘米（Centimeter），绝对长度单位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
6.参考文献
彻底了解css中的长度单位
视窗单位 vs 百分比单位
清楚CSS单位px、em、rem、vh、vw、vmin、vmax
7.更多讨论
Q：rpx与px之间的换算是怎么样的一个比例
A：rpx是微信小程序开发中新出了尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
微信官方建议视觉稿以iPhone 6为标准.
Q：各种单位在什么情况下用比较好？
A：因为vw、vh、vm（vmax、vmin）这几种长度单位的特殊性，个人建议和使用体会的话，推荐在移动端web应用上使用，毕竟手机平板这些移动产品的尺寸并不像pc这么固定，其他的长度单位，如px，这个的话，如果没有必要的话还是舍弃的好，原因是，px作为一个绝对长度单位，是无法随着设备的变化而变化的，就那么大，在手机上是这么大，在pc上也是这么大，对于网页及应用的自适应很不友好。自适应设计还是推荐用em、rem、百分比作为一个长度单位使用。
鸣谢
感谢大家观看
BY: 刘洪利
如果这篇文章对你有帮助，并且使你对修真院免费在线学习感兴趣，可以通过以下链接注册成员
ppt链接视频链接 密码 q0ar
IT修真院上海Web第1期学员刘洪利: 邀请码14898047
