web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！

时间 2019-12-11

原文原文链接

原创 2017-03-08 web小二 web前端开发

做为一名前端开发人员，css中的长度单位，都是咱们在工做中很是熟悉的名词，由于没有它们，咱们就不能声明某个字符应该多大，或者某些图像周围应该留白多少，甚至有时候能致使css不能进行正常工做，因此在不少css属性中，它们都是依赖于长度单位来显示各类页面元素。css

一、长度单位包括哪些？html

长度单位，其实在咱们的生活中，也很是常见，例如，厘米、毫米、英寸，还有常常接触到的像素（px），元素的字体高度（em）、字母x的高度（ex）、百分比（%）等等这些单位，可是咱们均可以将它们归结为两大类别：第一类，就是绝对长度单位；第二类，就是相对长度单位。前端

二、绝对长度单位web

那什么是绝对长度单位？具体有哪些？又是怎么进行应用的呢？浏览器

绝对长度单位比较好理解，它就是一个固定的值，一个真实的物理值，它不随设备或者受别的因素影响的长度单位。微信

具体的绝对长度单位主要包括如下几个：网络

1）、cm，厘米：一个长度计量单位，1m=100cm。工具

2）、mm，毫米：与厘米同样，也是一个长度计量单位，1cm=10mm；毫米同时仍是降雨量的计量单位。post

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；这些都是相对长度单位。

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。

另外，咱们在开发中还须要注意两点：

第一，若rem没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若rem有指定值，则1rem就是等于指定值。

第二，html设置为62.5%或者10px时会失效，是由于小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px如下的大小有关。因此，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

写在最后

在开发中，咱们到底如何选择长度单位，须要根据实际开发中的具体需求来，例如，像咱们这边有的项目，只需在pc上浏览，不须要在移动端进行浏览的，也不须要作响应式开发的，其实整个页面单位，用px,就能够知足开发需求了；而有的项目，可能须要作响应式开发的，那就要看具体状况而定，可是无论怎么样，你把长度单位的基本属性与本质弄明白了，怎么选用，是很是简单的事情，今天的这篇文章，但愿能给你们一点启发，也但愿能帮助到那些对基础知识点还不了解的同窗。

最后，我跟你们分享一个在线px,em,rem单位转换工具，地址：http://pxtoem.com/；在这里，我就不截图了，由于我本身配置的二手电脑，又花屏了，我要写完这篇稿子，准备拆机箱了，一个姑娘家，家里什么东西坏了，都是本身修，电脑坏了，本身修，无线网络不通了，本身修，网络电视，也要本身搞，这就是找个IT女的好处，今天是三八妇女节，请咱们的男同胞们，好好珍惜你身边的IT女。最后，说一句，本人也是女子一枚，请你们之后在微信上，不要再叫我哥了，叫我小二就好。女子节，祝天下女子越活越年轻！