在前端开发中，常常会碰到各种长度单位，比如 px, em, rem, vw 等。 总的来说，可以把这些长度单位分成两类：绝对长度单位 和 相对长度单位。
绝对长度单位
绝对长度单位是一个固定的值，一个真实的物理值，它不随设备或者受别的因素影响。
具体的绝对长度单位主要包括以下几个：
1）cm，厘米：一个长度计量单位，1m=100cm。
2）mm，毫米：与厘米一样，也是一个长度计量单位，1cm=10mm；毫米同时还是降雨量的计量单位。
3）in，英寸：这个是美国尺子上都有的单位，1英寸=2.54厘米，12英寸=1英寸。
4）pt，点（points）：一个印刷度量单位，1英寸相当于72点，例如，将元素p设置为24点的话，就是1英寸的三分之一（1/3）；所以，p{font-size：24pt；}与p{font-size：0.33in；}是等价。
5）pc，派卡（Picas）：一个印刷术语，1派卡相当于12点，6派卡相当于1英寸。
相对长度单位
实际的web开发中，运用比较多的，还是相对长度单位，例如 px，em，ex，rem，vw 等。
1）px，像素：px 是相对于显示器屏幕分辨率而言。用 px 设置字体大小时，可能比较稳定和精确。但是这种方法存在一些问题，例如：IE 无法调整那些使用 px 作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位；Firefox 能够调整 px 和 em，rem，但是96%以上的中国网民还是喜欢使用IE浏览器。为了保证用户体验和web页面效果，所以在web开发中还引入了“em”这个长度单位。
2）em，元素的字体高度：em是相对于父元素的属性值而计算的，所以em是非具体的数值。它需要一个参考点，一般都是以<body>的“font-size”为基准。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em= 16px。有时为简化 font-size 的换算，需要在 css 中的 body 选择器中声明 font-size=62.5%，此时 1em=16px*62.5%=10px，这样 12px=1.2em，10px=1em，也就是说换算时只需将原有 px 数值除以10，然后换上 em 作为单位即可。 em 的值并不是固定的；em的值会继承父级元素的字体大小。
3）ex，所有字体元素中小写x的高度：这个主要与字体有关，不同的字体，即使设置了相同的字体大小，但是 ex 的值也有可能不同，主要是因为字体的 x 高度可能不同。不过这个在我们实际开发中运用比较少，一般设置 em 后，ex 就会默认为 em 的一半，也有为计算方便，将 1ex 假设等于 0.5em，原因在于，大多数的字体的小写字母都是相应大写字母高度的一半。
4）rem，元素字体高度：与em相比较多了一个"r"，是CSS3新增的一个相对单位，是root em，简写 rem，这个单位与 em 的区别在于，使用 rem 为元素设定字体大小时，rem 相对的只是HTML根元素。通过 rem，既可以做到只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除IE9以下的版本外，所有浏览器均已支持 rem。
5）%，百分比：宽泛的讲是相对于父元素。如果是脱离文档流的元素，则要看具体情况：对于普通定位元素就是我们理解的父元素；；对于 position: absolute; 的元素是相对于已定位的父元素；；对于 position: fixed; 的元素是相对于 ViewPort（可视窗口）。
6）vw 和 vh：vw（Viewport Width）、vh(Viewport Height) 是相对于视图窗口的宽度或者高度，是css3的一部分。1vw等于视窗宽度的1%，1vh等于视窗高度的1%。在实际应用中，一般以设备宽 375 (iPhone6视窗宽度)为基准来设置（有的项目是750），算出 100px 所对应的 vw 值，一般取26.667vw。据此设置根元素的font-size，再根据 rem 去布局，完成不同设备的适配。
//视图宽度375
1vw = 375/100 = 3.75px
100px = 100/3.75 = 26.6667vw
7）vmin 和 vmax：vmin是当前 vw 和 vh 中较小的一个值，vmax是当前 vw 和 vh 中较大的一个值。做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh，这里就可以用到 vmin 和 vmax，使得文字大小在横竖屏下保持一致：如在手机竖屏时，1vmin = 1vw，1vmax = 1vh。
另外，我们在开发中还需要注意两点：
第一，若rem没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px；若rem有指定值，则1rem就是等于指定值 。
第二，html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。
在开发中，我们到底如何选择长度单位，需要根据实际开发中的具体需求来。例如，有的项目只需在 pc 上浏览，不需要在移动端浏览，也不需要做响应式开发的，其实整个页面单位，用 px 就可以满足开发需求了；而有的项目，可能需要做响应式开发的，那就要看具体情况而定。
3158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
