frank

彻底弄懂em、rem和px
1 前言国内常用的尺寸单位有px,国外则常用em,在css3中,又多了一个rem,今天我们就来彻底弄懂这三种尺寸单...
扫描右侧二维码阅读全文
18
2018/08

彻底弄懂em、rem和px

1 前言

国内常用的尺寸单位有px,国外则常用em,在css3中,又多了一个rem,今天我们就来彻底弄懂这三种尺寸单位。

2 特性

2.1 px

px是Pixel的缩写,也就是说[像素]是指基本原色素及其灰度的基本编码,由 Picture(图像) 和 Element(元素)这两个单词的字母所组成的,如同摄影的相片一样,数码影像也具有连续性的浓淡阶调。

当图片尺寸以像素为单位时,我们需要指定其固定的分辨率,才能将图片尺寸与现实中的实际尺寸相转换。例如大多数网页制作常用图片分辨率为72,即每英寸像素为72,1英寸等于2.54厘米。那么通过换算可以得出每厘米等于28像素,比如1515厘米长度的图片,等于420420像素的长度。

所以,单位大小的px指的就是屏幕上的尺寸大小,是恒定不变的。

这就造成了网页字体等元素大小无法调整,在不同大小的屏幕上大小一样,使得阅读舒适度差,字太大或太小等情况。

尽管Firefox能够调整大小,但96%以上的中国网民都是用IE内核的浏览器上网。

2.2 em

em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸(父级元素),国外使用比较多。

相对于px,em对移动设备兼容性会更好。

任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

2.3 rem

rem是css3新增的单位,这个单位也是相对单位,那么与em有什么区别呢?区别在于rem,相对于html的根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。可惜的是,它是css3中的新东西,所以并不兼容IE8及以下的浏览器。对于这个问题,解决方法也显而易见,就是多写一个px,浏览器就会忽略rem直接使用px。如下所示:

p {font-size:16px; font-size:1rem;}

在这里,我们提供一个使用浏览器默认的字号16px,的px和rem互化表:

pxrem
12.75
14.875
161
181.125
201.25
241.5
301.875
362.25
422.625
483

3 小结

这篇文章讲了px/em/rem的特性,推荐使用rem,可以适应多平台。

请大家多多支持!

Last modification:August 18th, 2018 at 02:36 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 路过

Leave a Comment