移动端页面制作基础(二)-了解CSS常用单位-px、em和rem

CSS常用单位介绍

在CSS中,尺寸单位有很多,px、em、rem、%、pt(磅)、in(英寸)、cm(厘米)、mm(毫米)、pc(12点活字)。前面所介绍的单位中,从磅开始都是和现实单位一样的绝对单位,前4个可以归类为相对单位,也是我们在网页制作中比较常用的几个单位。接下来我们就介绍下px、em和rem之间的区别和关系。

Px就是像素,是我们最常见也是使用最多的单位,和显示的设备的分辨率相关,1像素点就是代表显示器所能显示的最小的一个色块。大家常用px大部分是因为要和设计稿保持统一,从字体大小到各种间距,px使用起来相对简单有效,不需要进一步的换算。

Em是相对长度单位,相对的是当前对象的文本字体尺寸。如果当前字体未被设置大小,则按照浏览器默认的的字体尺寸。比如,当前字体大小为16px,那1em=16px。大家都知道,字体大小是可以继承的,所以,如果有两层的字体需要设置,那em的换算就会相对麻烦了。如以下结构:

 

如上代码所示, p段落的字体大小是16px,因为继承了父元素1em的字体大小,第二个p如果要显示成12px,需要如何用em值设置呢?因为这时候1em已经变成16px了,所以第二个段落需要设置的值就是12/16=0.75em。其实不管怎么换算,只要记住em是相对当前元素的字体大小设置的就行了。提供一个px和em快速转换的网址:http://pxtoem.com/

Rem是css3新增的一个单位,em大家已经了解过了,需要不停的根据当前元素的字体大小去做换算,那有没有一种单位可以设置一个基准值,然后大家都相对于基准值来设置大小呢?rem就是这样的一个单位,rem是root element缩写,所以大家应该反应过来了吧,rem是相对html根元素的字体大小变化的。比如html{font-size:16px},那在css任何地方,不管层级多深,不管当前元素的字体大小如何变化,1rem就是16px,10rem就是160px。但是很遗憾,这么好用的单位ie8及以下是不支持的,如果要考虑兼容性,还是使用px和em的组合。

以上大概介绍了下三个单位的概念,那这三种单位具体的使用场景又如何呢?大家可以从上面概念中看到,px属于比较固定的单位,设置多少就是多少,而em和rem单位可以让设计更加灵活,它们可以控制元素整体放大缩小。当放大页面的时候,低版本的IE浏览器是不会放大px单位的,这就造成原本想要通过放大页面看清字体的一些特殊用户失去良好的体验。Rem目前在移动端比较流行,配合媒体查询,可以很方便做分辨率的适配。比如:320px宽的设备使用html{font-size:100px},然后布局和文字大小都采用rem单位,那媒体查询只要根据设备宽度倍数改变html元素值就可以很好的达到适配其他分辨率设备的效果了。Em相对来说会更灵活,可以方便的让元素保持按比例缩放,包括间距、长宽、文字大小等。但em如果规划的不好,制作者很容易被换算关系搞混从而造成em的失控。

5