这里是修真学院的前端小教室。每篇文章分享自【背景介绍】【知识分析】【常见问题】【解决方案】【编码实践】【扩展思考】【更多讨论】【参考文献】八篇深入剖析前端这方面的知识/技能，本文分享：【px、em、rem、%、vw、wh、vm等单位有什么区别？]1.背景在传统的项目开发中，我们只使用px、%、em等单位，可以适用于大部分项目开发，具有较好的兼容性。但你知道吗？从css3开始，浏览器对逻辑单位的支持又提高了一个档次，增加了一些新的长度单位如rem、vh、vw、vm等，我们可以利用这些新的单位开发出比较好的响应式页面。然后涵盖各种不同分辨率的终端，包括移动设备。现在让我们看看这些长度单位之间的区别。二、知识解析1、pxpx是pixel的缩写，像素的意思。px是一张图片的最小点，一张位图是由成千上万个这样的点组成的。比如经常听到的电脑像素是1024x768，意思是水平方向1024个像素点，垂直方向1024个像素点。是768像素。兼容性：2、em引用是父元素的font-size，具有继承的特点。如果font-size是自己定义的（浏览器默认字体是16px），那么整个页面中的1em并不是一个固定值。兼容性：3.新的remcss3单元，相对于根元素html（网页）的font-size，不会像em那样依赖于父元素的字体大小，造成混淆。Compatibility:4.%一般来说是相对于父元素而言的，但不是很准确。1、对于普通的定位元素，就是我们理解的父元素2、对于position：absolute；元素相对于定位的父元素3.对于position:fixed;elementsarerelativetoViewPort(visualwindow)兼容性：3.vwcss3的新单位，viewpointwidth的缩写，窗口的宽度，1vw等于窗口宽度的1%。例如：浏览器宽度1200px，1vw=1200px/100=12px。兼容性：4.vhcss3的新单位，viewpointheight的缩写，窗口的高度，1vh等于窗口高度的1%。例如：浏览器高度900px，1vh=900px/100=9px。兼容性：4.vmcss3新单位，相对视口的宽度或高度较小者为准。其中最小的分为100个vm单位。例如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1vm=900px/100=9px。由于现在vm的兼容性不好，这里就不展示了。可以随意切换，比例变了，我就输了。3.常见问题vhvwvm实际应用场景？4、解法vhvw为不包括页面滚动条的窗口宽度（innerwidth），%包括滚动条内部的宽度（outerwidth）。一般来说，%可以满足大多数自适应设计的需要。您可以使用height:100vh来制作一个自适应高度，在没有滚动条的情况下填满屏幕。vw和vh设置的大小只与窗口的大小有关，所以用这个单元来开发各种屏幕设备的应用程序还是比较合适的。5.单击此处进行实际编码。6、CSS还有哪些长度单位？in:inchcm:cmmm:mmt:点，约1/72英寸pc:pica，约6pt，1/6英寸1in=2.54cm=25.4mm=72pt=6pc=96px7.参考资料参考资料1：你知道7个css单元是什么吗？参考2：CSS长度单位值测试实例页面《我们相信人人都可以成为工程师，现在就找个师兄指导你入门吧，学习的路上不再迷茫，技巧就在这里IT修真学院：http://www.jnshu.com，初学者转行互联网行业的聚集地。”欢迎加入IT交流群565734203与大家一起探讨交流
