新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站制作 > css教程 > CSS样式表中px、em和rem单位的区别与使用特点

CSS样式表中px、em和rem单位的区别与使用特点

时间:2016-12-20   文章来源:马海祥博客   访问次数:

最近在制作一些新网站,总听人说网站制作中字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应,px是绝对单位,不支持IE的缩放,em是相对单位。

CSS样式表中px、em和rem单位的区别与使用特点-马海祥博客

其实,在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的设计师等都是使用了px作为字体单位,只有百度好歹做了个可调的表率,而在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的,那么,CSS样式表中px、em和rem单位的区别是什么呢?其使用特点又是怎样的呢?

一、PX,EM和REM的定义

px表示像素,是绝对单位,不会因为其他元素的尺寸变化而变化。

像素的大小是会“变”的,也称为“相对长度”,越高位的像素,其拥有的色板也就越丰富,越能表达颜色的真实感。

em表示相对于父元素的字体大小,em是相对单位,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。

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作为单位就行了。

REM是相对单位,是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

二、CSS样式表中px、em和rem单位的特点

一般情况下,我们平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用,这主要是因为:

(1)、IE无法调整那些使用px作为单位的字体大小;

(2)、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

(3)、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

那么,css单位px、em和rem的特点分别是什么呢?

1、px的特点

PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。

但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破,这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。

因此,这时就提出了使用“em”来定义Web页面的字体。

2、em的特点

EM就是根据基准来缩放字体的大小,EM实质是一个相对值,而非具体的数值,这种技术需要一个参考点,一般都是以<body>的“font-size”为基准,如WordPress官方主题Twenntytwelve的基准就是14px=1em。

通常来说,em有如下特点:

(1)、em的值并不是固定的;

(2)、em会继承父级元素的字体大小。

所以,我们在写CSS的时候,需要注意以下3点:

(1)、body选择器中声明Font-size=62.5%;

(2)、将你的原来的px数值除以10,然后换上em作为单位;

如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象,因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。

然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px,这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px,而p作为其子级,em则继承content的字体高,也就是12px,所以p的1.2em就不再是12px,而是14.4px。

(3)、重新计算那些被放大的字体的em数值,避免字体大小的重复声明。

也就是避免1.2 * 1.2 = 1.44的现象,比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题已经解决,只需在body选择器中把62.5%换成63%就能正常显示了,原因可能是IE处理汉字时,对于浮点的取值精确度有限,不知道有没有其他的解释和优化方法(关于更多细节的优化,可查看马海祥博客《看看那些能提高效率却容易被人忽略的CSS细节》的相关介绍)。

3、rem的特点

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。

EM是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

下面就是一个例子:p {font-size:14px; font-size:.875rem;}

三、CSS样式表中px、em和rem单位的区别

通常情况下,我们区分px和em的差异就是说:px是绝对单位,不支持IE的缩放,em是相对单位,支持IE的缩放,其实,css单位em、px和rem的区别,详细来说,有以下几点:

1、PX:像素

PX是相对长度单位,它是相对于显示器屏幕分辨率而言的。

优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、EM

EM:是相对长度单位,EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

优缺点:EM的值并不是固定的,它会继承父级元素的字体大小。

PX和EM的之间的相互转换:

CSS样式表中px、em和rem单位的区别与使用特点-马海祥博客

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么,12px=0.75em,10px=0.625em。

为了使用方便,用em时,我们通常在CSS中的body选择器中声明font-size=62.5%(使em值变为:16px*62.5%=10px),之后,你只需要将你使用的px值除以10,即可得到em值,如:12px=1.2em,10px=1em。

3、REM

REM是CSS3新增的一个相对单位,REM是相对单位,是相对HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

马海祥博客点评:

综合以上几点的区别,马海祥推荐大家在这几种情况下来选择使用:PC端固定宽度的页面使用px;PC端自适应页面使用em;移动端使用rem。

除了IE6-IE8之外,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。因此为了浏览器的兼容性,可“px”和“rem”一起使用,用“px”来实现IE6-IE8下的效果,然后使用“Rem”来实现代浏览器的效果。

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/css/1736.html,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: CSS样式 css

上一篇:CSS样式表文件的优化方法及技巧
下一篇:没有了

今日话题更多>

SEO研究院 更多 >>