首页 > 代码库 > web开发中的长度单位(px,em,ex,rem),如何运用,看完这篇就够了!

web开发中的长度单位(px,em,ex,rem),如何运用,看完这篇就够了!

技术分享

 

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

 

1、长度单位包括哪些?

 

 长度单位,其实在我们的生活中,也非常常见,例如,厘米、毫米、英寸,还有经常接触到的像素(px),元素的字体高度(em)、字母x的高度(ex)、百分比(%)等等这些单位,但是我们都可以将它们归结为两大类别:第一类,就是绝对长度单位;第二类,就是相对长度单位。

 

2、绝对长度单位

 

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

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

具体的绝对长度单位主要包括以下几个:

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开发中,运用比较少,主要是因为绝对长度单位不利于页面屏幕的渲染,他们更多的是被用在印刷、打印等方向。

 

3、相对长度单位

相对长度单位,我们都见得比较多,例如,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女。最后,说一句,本人也是女子一枚,请大家以后在微信上,不要再叫我哥了,叫我小二就好。女子节,祝天下女子越活越年轻!

 

技术分享

 

web开发中的长度单位(px,em,ex,rem),如何运用,看完这篇就够了!