马海祥博客 > 网站制作 > 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样式表文件的优化方法及技巧
下一篇：background-position的使用方法及详细介绍

您可能还会对以下这些文章感兴趣！

CSS常用代码使用技巧大全

这几天，一直忙于帮公司做新的网站，在设计和修改新模板页面的过程中，需要不停的调试CSS样式，有的部分还需要重新来写。为了便于以后再次使用，我特意将在网页制作过程中常使用的CSS代码的使用技巧整理成文章的形式，在马海祥博客上跟大家分享一下，一是便于以后自己在……【查看全文】

阅读：1784关键词： CSS常用代码 CSS代码 CSS代码大全 CSS使用技巧 日期：2013-10-19
CSS无图片技术的实现方法有哪些？

什么是CSS无图片技术？CSS无图片技术就是在不使用CSS Image（通过CSS的引入的背景图片,不包括img标签内的图片）情况下生成类似图片效果的技术；换句话的意思就是在使用纯CSS生成类似图片效果的技术。如果我们尽可能的使用无图片技术来实现，明显可以提高页面的加载速度……【查看全文】

阅读：1441关键词： CSS技术无图片技术 CSS方法 日期：2014-02-14
background-position的使用方法及详细介绍

background属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-position、background-size……【查看全文】

阅读：162关键词： css 使用方法 日期：2017-03-26
如何命名CSS文件及样式规范更利于SEO优化

一名专业的SEO（搜索引擎优化）有很多工作要做，其中对代码的优化是一个很关键的步骤，为了更加符合SEO优化的规范，我们就需要按照CSS+DIV的命名规则来建设我们的网站，当然这些CSS文件不用一次性全部新建出来，只需要制作到那个页面的时候再建立即可，但是在初步规划的……【查看全文】

阅读：3655关键词： css文件 css样式 seo优化 css 日期：2014-11-10
常见的一些CSS基础知识题

CSS指层叠样式表(Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件……【查看全文】

阅读：241关键词： css知识 css 日期：2018-12-27
清除CSS浮动的方法原理及优缺点评定

今天看到有个博友问如何清除网站页面的CSS浮动？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及width height属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。其实解决浮动引起的问题有多种方法，……【查看全文】

阅读：5766关键词：清除CSS浮动 CSS浮动方法 CSS浮动原理 CSS优缺点 日期：2014-03-16
利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

CSS主要用于对HTML文件功能的补充及扩展，其作用就是对HTML文件中各种排版进行设置，达到对网页中字体、颜色、背景、图片等的控制，使网页能够完全依照设计者的想法来显示。CSS可以控制网页的显示，HTML标签中的属性也可以控制其显示，为什么还要有CSS呢？其中一个原因就是：……【查看全文】

阅读：2360关键词：制作网页网页制作 css 日期：2015-05-13
CSS样式表文件的优化方法及技巧

今天，整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。CSS代码优化的最大好处就是能够显着减少CSS文件的大小，其实还有很多其他益处，臃肿而杂乱的CSS样式表会使你遇到问题是难以调试……【查看全文】

阅读：405关键词： css css优化 日期：2016-10-27
网站CSS代码优化的7个原则

整理和优化代码不仅是为了你的CSS文件大小，还包括了维护性和可读性，以上的原理并不只是针对CSS，它们还能应用到HTML，Javascript以及其他编程语言，CSS文件不只是为了呈现给你网站的最终用户，上面的原理可以帮助用户体验以及开发者经验，运用这些原则到你未来的项目……【查看全文】

阅读：2598关键词：网站代码 css代码 css优化 日期：2014-10-10
如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说，经常会遇到这样一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢？有些朋友会发现，如果一行内容中有图片有文字……【查看全文】

阅读：29791关键词： css代码图片 css 日期：2015-05-05

↓ 点击查看更多 ↓

热点推荐

互联网更多>>

盘点2010年代这10年的重大网络安全事件二十一世纪的第2个十年即将过去，在过去十年里有很多的重大网络安全事件发生，我们见证了过去十年，大量的数据……
基于高斯模糊原理的模糊图片的研究高斯模糊（Gaussian Blur）的原理中，它是根据高斯曲线调节象素色值，它是有选择地模糊图像。说得直白一点，就是高……
互联网思维的一些特征如今，互联网迅猛发展已经渗透人们生活各个方面，尤其是互联网正加快向传统行业渗透和融合，对传统行业提出严……

网络营销更多>>

新浪微博已正式发布公告全面封杀微信	浅谈社交网络营销的七大营销策略
2017年数字营销的十大发展趋势及发展状态	从免费到付费的社交媒体形态发展分析