首页/CSS代码外包/css3设置字体px，em，rem的区别在哪？

css3设置字体px，em，rem的区别在哪？

发布-xiaoming | 浏览量-

PX:

PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

EM:

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

另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。狠击这里：px和em换算

Rem:

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

PX EM REM在WEB前端开发中的区别

都知道基于像素的字体大小所用的单位是px，但是随着响应式设计的不断火热，基于相对字体大小的单位em变开始流行起来。当然，rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列。是不是需要用em或者是rem来替换掉px在前端开发中进行使用呢？

为什么需要使用相对字体大小呢？

最能直接想到的一点就是它关于CSS3的一些东西。它是一种字号计算方式，尤其是当你在为多种分辨率进行字号计算的时候。想想要在手机上实现字体变大或者变小的时候，不得不要反复重新计算对象的字体大小，这是相当耗时间的。这个时候相对字体大小的设置才凸显出了它的有用之处。当你要在不同的样式结构中进行设置字体大小的时候，使用em或者rem能够让你针对一个具体的视屏进行字体大小的增大或者减小。css如何定义标签字体？

px，em，rem的区别在哪？

字号、pt、px、em换算对照表

Px是一个绝对字体大小，em则是基于基数（比如：1.5em）来计算出来的相对字体大小。这个基数是需要乘以当前对象从其父级遗传字体大小。

1.5em = 父级字体大小 * 1.5 = ?

不过，这有个问题就是在css中想要知道当前元素的字体大小所遗传的是哪个父级元素的字号。因此，rem的出现就很好的解决了这个问题。rem是基于根节点（比如html）的字体大小进行计算的。

1.5rem = 默认字体大小 (比如： 16px) * 1.5 = 24px

这个默认字体大小是依据你网站当前访问时所使用的浏览器或者其他设备来决定的，对于桌面浏览器默认是16px的字体大小。然后你现在要转换当前元素的字体大小为rem的时候你就可以这样做：

28px = 28/16 = 1.75rem

为了更方便的进行计算转换，你可以把默认字体大小设置成62.5%或者是10px，这个时候你要计算当前元素字体大小的时候，你就可以这样：

28px = 28/10 = 2.8rem

rem的浏览器支持

目前大多数浏览器都支持rem单位的字体大小，不过，要想兼容IE7和IE8，你还是需要使用px来做单位。写法如下：