认识达内从这里开始

认真做教育专心促就业

如何运用web开发中的长度单位（px,em,ex,rem）

发布：互联网
来源：互联网
时间：2017-05-05 14:43

作为一名前端开发人员,css中的长度单位,都是我们在工作中非常熟悉的名词,因为没有它们,我们就不能声明某个字符应该多大,或者某些图像周围应该留白多少,甚至有时候能导致css不能进行正常工作,所以在很多css属性中,它们都是依赖于长度单位来显示各种页面元素.潍坊达内培训开设Web前端课程,将会在授课过程中为学员详细讲解.

潍坊达内培训

    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,就可以满足开发需求了;而有的项目,可能需要做响应式开发的,那就要看具体情况而定,但是不管怎么样,你把长度单位的基本属性与本质弄明白了,怎么选用,是非常简单的事情.

更多潍坊达内培训相关资讯,请扫描下方二维码

潍坊达内培训