CSS3emrem详细教程

作者：断雁难飞_920 | 来源：互联网 | 2023-09-09 09:43

1#mobilecss&rem&em&px1rem16px任意浏览器的默认字体高都是16px,所有未经调整的浏览器都符合:1em16px,那么12px0.75em,10px0.

# mobile css & rem & em & px> 1 rem &＃61;&＃61;&＃61; 16px任意浏览器的默认字体高都是 16px,
所有未经调整的浏览器都符合: 1em&＃61;16px, 那么12px&＃61;0.75em,10px&＃61;0.625em;为了简化font-size的换算&＃xff0c;需要在css中的body选择器中声明 font-size&＃61;62.5%&＃xff0c;这就使em值变为 16px*62.5%&＃61;10px,这样12px&＃61;1.2em, 10px&＃61;1em, 也就是说只需要将你的原来的px数值除以10&＃xff0c;然后换上em作为单位就行了。&＃96;&＃96;&＃96;css* {box-sizing: border-box;/* margin: 0; *//* padding: 0; */
}
html{/* font-size: 16px; *//* default 16px &＃61;&＃61;&＃61; 1rem */font-size: 62.5%;/* 10px &＃61;&＃61;&＃61; 1rem */
}&＃96;&＃96;&＃96;

1 em 实例code&＃xff1a;

1 DOCTYPE html>
2 <html lang&＃61;"en">
3 <head>
4 <meta charset&＃61;"UTF-8">
5 <title>emtitle>
6 <style>
7 .container{
8 /* div 绝对居中*/
9 position: absolute;
10 top: 50%;
11 left: 50%;
12 margin-top: -5em;
13 margin-left: -14em;
14 border-radius: 10em;
15 border: 1px solid red;
16 font-size: 20px;
17 background-color: #0f0;
18 /*em &＃61; 20px*/
19 }
20 .em{
21 font-size: 2em;
22 /* 相对于相对于父元素的font-size&＃xff0c;所以2em &＃61; 2*20px &＃61; 40px */
23 /*em &＃61; 40px*/
24 height: 5em;
25 /* 相对于本身元素的font-size&＃xff0c;所以5em &＃61; 5*40px &＃61; 200px */
26 width: 14em;
27 /* 相对于本身元素的font-size&＃xff0c;所以14em &＃61; 14*40px &＃61; 560px */
28 background-color: #000;
29 color: #0f0;
30 opacity: 0.5;
31 /* IE8 and lower */
32 filter: alpha(opacity&＃61;50);
33 /*文字水平居中&＃xff1a;text-align*/
34 text-align: center;
35 /*文字垂直居中&＃xff1a;line-height &＃61; height*/
36 line-height: 5em;
37 }
38 style>
39 head>
40 <body>
41
46 <div class&＃61;"container">
47 <p class&＃61;"em">div绝对居中 && em字体大小p>
48 div>
49 body>
50 html>

1 rem 实例code&＃xff1a;

1 DOCTYPE html>
2 <html lang&＃61;"en">
3 <head>
4 <meta charset&＃61;"UTF-8">
5 <title>rem 兼容性: IE8- 不支持title>
6 <style>
7 .html{
8 font-size: 1rem;
9 /* 浏览器默认字体大小为16px&＃xff0c;则1*16&＃61;16px&＃xff0c;所以html根元素字体大小为16px */
10 /*1rem &＃61; 16px*/
11 }
12 .container{
13 /* div 绝对居中*/
14 position: absolute;
15 top: 50%;
16 left: 50%;
17 margin-top: -10rem;
18 margin-left: -20rem;
19 border-radius: 15em;
20 border: 1px solid red;
21 font-size: 1rem;
22 background-color: #0f0;
23 }
24 .rem{
25 font-size: 2rem;
26 /* 相对于html根元素的font-size&＃xff0c;所以2rem &＃61; 2*16px &＃61; 32px */
27 /* rem &＃61; 16px*/
28 height: 20rem;
29 /* 相对于本身元素的font-size&＃xff0c;所以10rem &＃61; 120*16px &＃61; 320px */
30 width: 40rem;
31 /* 相对于本身元素的font-size&＃xff0c;所以20rem &＃61; 40*16px &＃61; 640px */
32 background-color: #000;
33 color: #0f0;
34 opacity: 0.5;
35 /* IE8 and lower */
36 filter: alpha(opacity&＃61;50);
37 /*文字水平居中&＃xff1a;text-align*/
38 text-align: center;
39 /*文字垂直居中&＃xff1a;line-height &＃61; height*/
40 line-height: 20rem;
41 }
42 style>
43 head>
44 <body>
45
46 <div class&＃61;"container">
47 <p class&＃61;"rem">div绝对居中 && rem字体大小p>
48 div>
49 body>
50 html>

http://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984?ec_unit&＃61;translation-info-language

综合指南: 何时使用 Em 与 Rem
你可能已经很熟练使用这两个灵活的单位&＃xff0c;但你可能不完全了解何时使用 rem &＃xff0c;何时使用 em。本教程将帮你弄清楚!

Em 和 rem都是灵活、可扩展的单位&＃xff0c;由浏览器转换为像素值&＃xff0c;具体取决于您的设计中的字体大小设置。如果你使用值 1em 或 1rem&＃xff0c;它可以被浏览器翻译成从16px到 160px 或其他任意值。

CSS 边距设置为 1em浏览器翻译成16pxCSS padding设为 16px浏览器翻译成160px

另一方面&＃xff0c;浏览器使用 px 值&＃xff0c;所以 1px 将始终显示为完全 1px。

滑动滑块试试这个 CodePen 例子&＃xff0c;你可以看到rem 和 em 单位的值可以转化为不同的像素值&＃xff0c;而 px 单位保持固定大小:

最大的问题是

使用 em 和 rem 单位可以让我们的设计更加灵活&＃xff0c;能够控制元素整体放大缩小&＃xff0c;而不是固定大小。我们可以使用这种灵活性&＃xff0c;使我们在开发期间&＃xff0c;能更加快速灵活的调整&＃xff0c;允许浏览器用户调整浏览器大小来达到最佳体验。

Em 和 rem 单位提供的这种灵活性和工作方式都很相似&＃xff0c;所以最大的问题是&＃xff0c;我们何时应使用 em 值&＃xff0c;何时应使用 rem 值呢?

主要区别

Em 和 rem 单位之间的区别是浏览器根据谁来转化成px值理解这种差异是决定何时使用哪个单元的关键。

我们要通过复习 rem 和 em 单位如何工作&＃xff0c;来确保你知道每一个细节。然后我会讲到为什么你应该使用 em 或 rem 的单位。

最后&＃xff0c;我们会看看到底哪些典型元素的设计&＃xff0c;你应该在实际应用中使用哪种类型的单位。

rem 单位如何转换为像素值

当使用 rem 单位&＃xff0c;他们转化为像素大小取决于页根元素的字体大小&＃xff0c;即 html 元素的字体大小。根元素字体大小乘以你 rem 值。

例如&＃xff0c;根元素的字体大小 16px&＃xff0c;10rem 将等同于 160px&＃xff0c;即 10 x 16 &＃61; 160。

CSS padding设置为 10rem计算结果为160px

em 单位如何转换为像素值

当使用em单位时&＃xff0c;像素值将是em值乘以使用em单位的元素的字体大小。

例如&＃xff0c;如果一个 div 有 18px 字体大小&＃xff0c;10em 将等同于 180px&＃xff0c;即 10 × 18 &＃61; 180。

CSS padding设置为 10em计算到 180px (或接近它)

重点理解:

有一个比较普遍的误解&＃xff0c;认为 em 单位是相对于父元素的字体大小。事实上&＃xff0c;根据W3标准 &＃xff0c;它们是相对于使用em单位的元素的字体大小。

父元素的字体大小可以影响 em 值&＃xff0c;但这种情况的发生&＃xff0c;纯粹是因为继承。让我们看看为什么以及如何起作用。

Em 单位的遗传效果

使用 em 单位存在继承的时候&＃xff0c;情况会变得比较棘手&＃xff0c;因为每个元素将自动继承其父元素的字体大小。继承效果只能被明确的字体单位覆盖&＃xff0c;比如px,vw

使用 em 单位的元素字体大小根据它们来定。但该元素可能继承其父元素的字体大小&＃xff0c;而父元素又继承其父元素的字体大小&＃xff0c;等等。因此&＃xff0c;以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

让我们看看一个例子。在下面的 CodePen单步执行试试。随着你的前进&＃xff0c;使用 Chrome 开发工具或 Firebug 为火狐浏览器来检查我们的 em 单位计算到的像素值。

Em 继承的例子

如果我们的根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em&＃xff0c;该 div 将从根元素继承字体大小 16px。因此padding会翻译成 24px&＃xff0c;即 1.5 x 16 &＃61; 24。

如果我们加多一个div来包裹原先的div&＃xff0c;然后设置其字体大小为 1.25em呢?

我们包裹的 div 继承根元素字体大小 16px &＃xff0c;并乘以它自己的 1.25em 的字体大小。这将设置包裹 div 字体大小为 20px&＃xff0c;即 1.25 x 16 &＃61; 20。

现在我们原始的 div 不再直接从根元素继承,而是从其新的父元素继承字体大小为 20px 1.5em 其padding值现在等于 30px&＃xff0c;即 1.5 x 20 &＃61; 30。

这个继承效应可以更复杂&＃xff0c;如果我们向我们原始的 div 添加 em 字体单位&＃xff0c;比方说 1.2em。

Div 从其父级继承 20px 字体大小&＃xff0c;然后&＃xff0c;乘以它自己的 1.2em 设置&＃xff0c;给它 24px&＃xff0c;即 1.2 × 20 &＃61; 24 新字体大小。

div上的1.5em padding 现在将再次改变大小&＃xff0c;用新的字体大小&＃xff0c;36px&＃xff0c;即 1.5 × 24 &＃61; 36 。

最后&＃xff0c;为了进一步说明那个 em 单位是相对于他们最终获得(不是父元素)的字体大小&＃xff0c;让我们来看看设置padding 1.5em 如果我们显式设置 div 使用 14px值&＃xff0c;不继承字体大小会发生什么。

现在&＃xff0c;我们的padding为 21px&＃xff0c;即 1.5 x 14 &＃61; 21 已经变小了。它不受父元素的字体大小。

由于存在着这些隐患&＃xff0c;你可以看到为什么必须知道如何正确管理使用 em 单位。

浏览器设置 HTML 元素字体大小的影响

默认情况下浏览器通常有字体大小 16px&＃xff0c;但这可以被用户更改为从 9px 到 72px的任何值

你需要知道的:

根 html 元素将继承浏览器中设置的字体大小&＃xff0c;除非显式设置固定值去覆盖。

所以 html 元素的字体大小虽然是直接确定 rem 值&＃xff0c;但字体大小可能首先来自浏览器设置。

因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。

没有设置 HTML 字体大小时&＃xff0c;浏览器设置起作用

除非重写&＃xff0c;否则它将继承浏览器默认设置的字体大小。例如&＃xff0c;让我们把网站的html元素没有设置font-size值。

如果用户让他们的浏览器默认字体大小为 16px&＃xff0c;那么根元素字体大小将为 16px。在 Chrome 开发工具下&＃xff0c;你可以在已计算选项卡下看到一个元素继承的属性。

在这种情况下 10rem 等于 160px&＃xff0c;即 10 x 16 &＃61; 160。

如果用户将其浏览器中的默认字体大小调为18px&＃xff0c;根字体大小变成 18px。现在 10rem 转换为 180px&＃xff0c;即 10 × 18 &＃61; 180。

浏览器将调整使用 em 单位的 HTML 元素字体大小

当 em 单位设置在 html 元素上时&＃xff0c;它将转换为em值乘以浏览器字体大小的设置。

例如&＃xff0c;如果网站的 html 元素的字体大小属性设置为 1.25em&＃xff0c;根元素字体大小将为 1.25 倍的浏览器的字体大小设置。

如果浏览器字体大小被设置为 16px&＃xff0c;根字体大小会出来为 20px&＃xff0c;即 1.25 x 16 &＃61; 20。

在这种情况下 10rem 将等于 200px&＃xff0c;即 10 × 20 &＃61; 200。

所以&＃xff0c;如果浏览器字体大小被设置为 20px&＃xff0c;根元素字体大小会翻译成 25px&＃xff0c;即 1.25 × 20 &＃61; 25。

现在 10rem 将等于 250px&＃xff0c;即 10 × 25 &＃61; 250。

总结与 rem 差异 em

上述所有归结如下:

rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响&＃xff0c;除非显式重写一个具体单位。

em 单位转为像素值&＃xff0c;取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小&＃xff0c;除非显式重写与一个具体单位。

为什么使用 rem 单位:

Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。相反&＃xff0c;它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小&＃xff0c;不再是使用固定的 px 单位。

为此&＃xff0c;使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器&＃xff0c;我们的布局都能调整到合适大小。

一个站点最初设计可以专注于最常见的默认浏览器中字体大小 16px。

浏览器字体大小 16px

但是&＃xff0c;通过使用 rem 单位&＃xff0c;如果用户调整其字体大小&＃xff0c;我们也能保证布局的完整性&＃xff0c;使用较小的文本避免文本空间被压扁了。

浏览器字体大小 34px

如果用户缩小其字体大小&＃xff0c;整个布局掉下来&＃xff0c;空白区域中的文本也不会想得很无力。

浏览器字体大小 9px

用户会因为各种各样的原因更改字体大小设置。容纳这些设置可以获得更好的用户体验。

重要的是:

一些设计师使用结合 rem 单位的方式给html元素设置了一个固定的px单位。这是很普遍的做法&＃xff0c;所以改变html元素的字体大小时&＃xff0c;可以使整个页面做相应调整

我强烈反对种做法&＃xff0c;因为它重写继承了用户设置的浏览器字体大小。更夸张的说&＃xff0c;这剥削了用户自行调整以获得最佳视觉效果的能力。

如果您确实需要更改 html 元素的字体大小&＃xff0c;那么就使用em&＃xff0c;rem单位&＃xff0c;这样根元素的值还会是用户浏览器字体大小的乘积。

这将允许您通过更改您的 html 元素的字体大小&＃xff0c;调整你的设计&＃xff0c;但仍会保留用户的浏览器设置的效果。

为什么使用 em 单位

em 单位取决于一个font-size值而非 html 元素的字体大小。

为此&＃xff0c;em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。

例如&＃xff0c;您可能使用em 值设置导航菜单项的padding、 margin&＃xff0c;line-height等值。

带有0.9rem 字体大小的菜单

通过这种方式&＃xff0c;如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。

带有1.2rem 字体大小的菜单

前面一节中你看到跟踪 em 单位如何变得不可收拾。为此&＃xff0c;我建议只在你标识清楚的情况下使用 em 单位。

实际应用

一些 web 设计师之间存在辩论&＃xff0c;我相信不同的人有不同的首选的方法&＃xff0c;但我的建议是&＃xff0c;如下所示。

使用 em 单位:

根据某个元素的字体大小做缩放而不是根元素的字体大小。

一般来说&＃xff0c;你需要使用 em 单位的唯一原因是缩放没有默认字体大小的元素。

根据我们上面的例子&＃xff0c;设计组件比如按钮&＃xff0c;菜单和标题可能会有自己明确的字体大小。当你修改字体大小的时候&＃xff0c;你希望整个组件都适当缩放

通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。

我建议&＃xff0c;当您使用 em 单位&＃xff0c;他们使用的元素的字体大小应设置对rem单位&＃xff0c;以保留的可扩展性&＃xff0c;但避免继承混淆。

通常不使用 em 单位控制字体大小

我们经常会看到使用em作为字体大小单位&＃xff0c;特别是标题&＃xff0c;当我认为如果使用rem将更具可扩展性。

标题经常使用 em 单位的原因是他们相比px单位&＃xff0c;在相对常规文本大小方面更出色。然而 rem 单位同样也可以实现这一目标。如果 html 元素上任何字体大小调整&＃xff0c;标题大小仍会缩放。

请尝试更改下面的 CodePen&＃xff0c;看看 html 元素上的 em 字体大小如何起作用:

少部分情况下&＃xff0c;我们不想我们的字体大小根据根元素做调整&＃xff0c;只有几个例外的情况。

我们可以想到的例子是一个使用 em 字体大小的下拉菜单&＃xff0c;我们有第二个级别的菜单项文本大小取决于第一级字体大小。另一个例子可能是用在按钮里面的字体图标&＃xff0c;字体图标的大小跟按钮的文本大小有关。

然而&＃xff0c;大多数 web 设计中的元素往往不会有这种类型的要求&＃xff0c;所以一般使用 rem 单位的字体大小&＃xff0c;em 单位只在特殊的情况下使用。

使用 rem 单位:

不需要 em 单位&＃xff0c;并且根据浏览器的字体大小设置缩放的任何尺寸。

这几乎在一个标准的设计中占据了一切&＃xff0c;包括heights&＃xff0c;widths&＃xff0c;padding&＃xff0c;margin&＃xff0c;border&＃xff0c;font-size&＃xff0c;shadows&＃xff0c;几乎包括你布局的每部分。

简单地说&＃xff0c;一切可扩展都应该使用 rem 单位。

小贴士

创建布局时&＃xff0c;往往要以像素为单位更方便&＃xff0c;但部署时应使用rem单位。

你可以使用预处理比如Stylus / Sass / Less&＃xff0c;来自动转换单位或PostCSS之类的插件。

或者&＃xff0c;您可以使用 PXtoEM 手动做您的转换。

始终使用 rem 单位做媒体查询

特别注意&＃xff0c;当使用 rem 单位创建统一可扩展的设计&＃xff0c;媒体查询也应该是rem单位。这将确保&＃xff0c;无论用户浏览器的字体大小&＃xff0c;您的媒体查询会对它作出反应和调整您的布局。

例如&＃xff0c;如果用户缩放文本非常高&＃xff0c;您的布局可能需要从两列到单个列调整&＃xff0c;因为它可能会在较小的移动设备上显示。

如果您的断点在固定的像素宽度&＃xff0c;只有不同的视口的大小可以触发它们。但是基于 rem 的断点他们将响应不同的字体大小。

不要使用 em 或 rem :

多列布局

布局中的列宽通常应该是 %&＃xff0c;因此他们可以流畅适应无法预知大小的视区。

然而单一列一般仍然应使用 rem 值来设置最大宽度。

例如:

.container {width: 100%;max-width: 75rem;
}

这保持列的灵活&＃xff0c;可扩展。又能防止变得太宽了。

当元素应该是严格不可缩放的时候

在一个典型的 web 设计的过程中&＃xff0c;不会有很多部分的你不能使用伸缩性设计的布局。不过偶尔你会遇到真的需要使用显式的固定的值&＃xff0c;以防止缩放的元素。

采用固定的尺寸值的前提应该是&＃xff0c;如果被缩放的话&＃xff0c;它的结构会被打碎。这真的不常出现&＃xff0c;所以你想拿出那些 px 单位之前&＃xff0c;问问自己是否使用它们是绝对必要的。

总结

让我们以一个快速符号点概括我们介绍的内容:

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响

rem 单位可以从浏览器字体设置中继承字体大小。

使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位&＃xff0c;并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位&＃xff0c;除非你确定你需要 em 单位&＃xff0c;包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem -改用 %。
不要使用 em 或 rem&＃xff0c;如果缩放会不可避免地导致要打破布局元素。
我希望你现在已经建立了强健的、完整的图片&＃xff0c;到底 em 和 rem 的单位如何工作&＃xff0c;并通过&＃xff0c;知道如何最好地利用他们在你的设计中。

我鼓励您尝试为你自己使用本教程指南&＃xff0c;它们会为您创建完全成熟的可伸缩性和响应性布局。

https://css-tricks.com/confused-rem-em/

Jeremy Church:

While em is relative to the font-size of its direct or nearest parent,

rem is only relative to the html (root) font-size.

Jeremy tends to favor em, because of the ability to control an area of a design.

As in, scale the type in that specific area relatively.

I have tended to like rem because of the ability to scale type across the entire page easily, but I&＃39;ve gotten into issues where that wasn&＃39;t good enough control so I could see moving back to em for that reason.

Direct Link → https://j.eremy.net/confused-about-rem-and-em/

February 24, 2014
Confused About REM and EM?
REM can be confusing, especially without a solid understanding of its partner EM and their archvillain, the PX.

Relative Units

Both rem and em are relative units, px is not.

Before considering rem, it’s important to understand the relationship between em, markup and inheritance.

Below, the example demonstrates how each nested child assumes the parent is1em(100%).

Thus children inherit size by scaling in relation to the parent font size.

EM values inherit from their parent

PX values do not inherit

Visit pxtoem.com for conversion tables and calculator.

While the value remains 0.773em, the actual font size is calculated at 77.3% of its direct parent, which in turn scales from its parent. This continues up the DOM tree whenever a parent has a defined font-size.

In the example, several elements, each with a font size, are nested for a visual effect. You can see it’s not a good practice, because the compound inheritance creates unwanted results. However, you shouldn’t have to worry about this if your CSS and markup are modular to begin with.

Save Lives with EM

You can choose a different ratio/scale and calculate your own values on Type Scale.

Well, maybe not lives, but it will save lines … of code. The following examples do the same thing; update font sizes and padding within a media query. The initial values are calculated by incrementing 1em(16px) at a 1:1.2 ratio.

EM scales by updating one value

html { font-size: 1em; }h1 { font-size: 2.074em; }h2 { font-size: 1.728em; }h3 { font-size: 1.44em; }h4 { font-size: 1.2em; }small { font-size: 0.833em; }.box { padding: 1.25em; }&＃64;media screen and (min-width: 1400px) {html { font-size: 1.25em; } }

Or, recalculate every PX value

html { font-size: 16px; }h1 { font-size: 33px; }h2 { font-size: 28px; }h3 { font-size: 23px; }h4 { font-size: 19px; }small { font-size: 13px; }.box { padding: 20px; }&＃64;media screen and (min-width: 1400px) {html { font-size: 20px; }h1 { font-size: 41px; }h2 { font-size: 35px; }h3 { font-size: 29px; }h4 { font-size: 24px; }small { font-size: 17px; }.box { padding: 25px; } }

There’s only one em value to overwrite in the media query, because em inherits and scales relative to its parent (html in this case) font size, similar to the way vector paths scale proportionally.

The code is nearly doubled when updating px, because each value has to be recalculated and defined in the media query.

REM as in Root EM

While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size. I like to think of it as a reset. If a style sheet is built in a modular fashion, then rem shouldn’t be needed very often, but it can be handy at times.

For example, if you’re trying to achieve consistent spacing without extra markup, rem can be used to define the padding and margins.

EM will scale padding and margins too

Use REM for consistent padding and margins

PX can be used for consistent padding and margins too, but it doesn’t scale across media queries like em and rem.

Conclusion

I use em for nearly everything, rem occasionally for padding or margins, but only in a pinch, and px some times for borders.

For the most part, I want children to inherit size. If a sidebar is going to be a smaller font size, then I expect all its children to resize proportionally without having to calculate and redefine individual selectors.

I struggle to think of a good reason to use rem for font-size values, but I’m sure there are exceptions. If I’m trying to reset a font size with rem, it’s probably a sign my CSS is not very modular and due for a refactor. ∎

Resources

My favorite em calculator is pxtoem.com. In addition to calculating em or px values, there’s a handy table of the two which really helps to see the relationship.

REM is the same as em except it’s always calculated from the html font size. So, just use the same pxtoem.comcalculator to figure out its relation to the root size.

Article in Español: ¿Te confunden REM y EM?

Article in Italian: Sei confuso su REM ed EM?

http://www.w3cfuns.com/notes/18191/edca35cae47706cd7ca3d8d7945b7eae.html
css中的单位px和em,rem之间的区别

px像素(Pixel)&＃xff0c;相对长度单位&＃xff0c;像素px是相对于显示器屏幕分辨率而言的。
px的特点&＃xff1a;
1.IE无法调整那些使用px作为单位的字体大小&＃xff1b;
2.Fixefox能够调整px和em,rem&＃xff0c;但是96%以上的中国网名使用的是IE浏览器(或内核)。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置&＃xff0c;则相对于浏览器的默认字体尺寸。
注&＃xff1a;任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合&＃xff1a;1em&＃61;16px。相对应的12px&＃61;0.75em,10px&＃61;0.625em。为了简化font-size的换算&＃xff0c;需要在css中的body选择器中声明font-size&＃61;62.5%。这样就使得em变为16px*62.5%&＃61;10px&＃xff0c;相应的12px&＃61;1.2em,10px&＃61;1em,也就是说只需要将你的原来的px数值除以10&＃xff0c;然后换上em作为单位就行了。

em的特点&＃xff1a;
1.em的值并不是固定的&＃xff1b;
2.em会继承父级元素的字体大小。

为了简便单位的换算。在写css时可以这样写
1.body选择器中声明font-size&＃61;62.5%;
2.将原来的px数值除以10&＃xff0c;然后换上em作为单位&＃xff1b;
3.重新计算那些被放大的字体的em数值&＃xff0c;避免字体大小的重复声明。

rem是CSS3新增的一个相对单位(root em,根em)&＃xff0c;这个单位引起了广泛关注。这个单位与em的区别在于使用rem为元素设置字体大小时&＃xff0c;任然是相对大小&＃xff0c;但相对的只是HTML根元素。这个单位可一说是集相对大小和绝对大小的优点于一身&＃xff0c;通过它既可以做到只修改根元素就可以实现成比例的调整所有字体大小&＃xff0c;又可避免字体大小逐层复合的连锁反应。目前&＃xff0c;除了IE8及更早版本外&＃xff0c;所有浏览器均已支持rem。对于不支持的浏览器&＃xff0c;应对方法也比较简单&＃xff0c;就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
例如&＃xff1a;p{font-size:14px;font-size:875rem;}

选择什么单位主要还是由项目的需求来决定。

http://www.cnblogs.com/xiaohuochai/p/5485683.htm

深入理解CSS中的长度单位

div绝对居中 && em字体大小

转:https://www.cnblogs.com/xgqfrms/p/5658713.html