web开发中的长度单位(px,em,ex,rem),如何运用?

2017-11-16 159 0 编辑:深正互联 来源:互联网

作为一名前端开发人员,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,就可以满足开发需求了;而有的项目,可能需要做响应式开发的,那就要看具体情况而定,但是不管怎么样,你把长度单位的基本属性与本质弄明白了,怎么选用,是非常简单的事情,今天的这篇文章,希望能给大家一点启发,也希望能帮助到那些对基础知识点还不了解的同学。


本站文章均为深正网站建设摘自权威资料,书籍,杂志或原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享到社交网站,引用和转载,我们谢绝直接复制和抄袭!感谢您...

学习课堂

【技术】如何配置web服务器IIS?

完成了llS的安装之后,就可以利用llS在本机上创建Web站点了,不过必须进行设置才能正常运行。如llS默认启用文档为default.htm,当希望将主页更改成default.asp时,就必须进行Internet信息服务的设置...

2016-10-13
2017-03-06
2017-08-07
2017-05-11

动态更新

【观点】深正互联对于现场改稿的看法

【网站建设】现场盯屏改稿,那是个别图文制作和一般印刷厂才有的做法,而网站建设公司,需要的是一个良好宽松的创意设计环境,使创意人员的思维和灵感全部发挥出来,这样才能有让客户眼前一亮的完美方案...

2017-04-24
2016-10-19
2016-10-12
2016-03-31

资讯知识

巴基斯坦网红被杀 因发性感照片被亲兄弟荣誉处决

2014年开始出名的巴鲁奇因为在社交媒体上发布了一些大胆、有时略显性感的自拍照片,视频和评论,成了巴基斯坦家喻户晓的人物。她生前受到很多主张维护妇女权益的自由派人士支持,但也受到很多保守派人士在网上的围攻和威胁...

>2016-07-12
>2016-12-21
>2016-07-12
>2017-10-31
亲,请您联系我们吧

您的疑问,只要您主动联系,将为您得到最专业,最全面的解答,欢迎您询问...