font-size: 0.75em;
}
如果我们有一个嵌套在另一个列表中的列表，则内部列表的字体大小将为其父字体大小的75％（在本例中为9px）。我们仍然可以通过以下方式克服此问题：
ul ul {
font-size: 1em;
}
这可以解决问题，但是我们仍然必须非常注意嵌套变得更深的情况。
使用rem单位，事情变得更简单：
html {
font-size: 100%;
}
ul {
font-size: 0.75rem;
}
由于所有大小都是从根字体大小引用的，因此不再需要在单独的声明中覆盖嵌套大小写。
带Rem单位的字体大小
使用rem单位进行字体大小调整的先驱之一是Jonathan Snook，他在2011年5月发表了REM字体大小调整文章。像许多其他CSS开发人员一样，他不得不面对em单位带来的复杂布局问题。
当时，较旧版本的IE仍占有较大的市场份额，因此无法缩放带有像素大小的文本。但是，正如我们前面所看到的，使用em单元很容易迷失嵌套并获得意想不到的结果。
使用rem进行字体大小调整的主要问题是使用这些值有些困难。让我们看一个以rem单位表示的常见字体大小的示例，当然，假定基本大小为16px：
-
10px = 0.625rem
-
12px = 0.75rem
-
14px = 0.875rem
-
16px = 1rem（基本）
-
18px = 1.125rem
-
20px = 1.25rem
-
24px = 1.5rem
-
30px = 1.875rem
-
32px = 2rem
如我们所见，这些值对于进行计算不是很方便。因此，Snook使用了一个名为“ 62.5％ ” 的技巧。无论如何，这并不是一个新发现，因为它已经与em单元一起使用：
body { font-size:62.5%; } /* =10px */
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
由于rem单位是相对于根元素的，因此Snook解决方案的变体变为：
html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
一个还必须考虑其他不支持rem的浏览器。因此，上面的代码实际上是这样编写的：
html {
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 1.4rem;
}
h1 {
font-size: 24px;
font-size: 2.4rem;
}
尽管此解决方案似乎接近“黄金法则”的地位，但有人建议不要盲目使用它。哈里·罗伯茨（Harry Roberts）就使用rem单元写了自己的看法。他认为，尽管62.5％的解决方案使计算更加容易（因为其中的字体大小px是其rem值的10倍），但最终迫使开发人员显式重写其网站中的所有字体大小。
第三种观点来自CSS-Tricks的Chris Coyier。他的解决方案利用了到目前为止我们遇到的所有三个单元。他将根大小保留在中px，将模块保留在rem单位中，将元素保留在模块中，将它们保留为em。这种方法使操作全局大小变得更容易，它可以缩放模块中的类型，而模块内容是根据模块字体大小本身来缩放的。路易斯·拉扎里斯（Louis Lazaris）在CSS中的em单元的力量中讨论了后者的概念。
在下面的示例中，您可以看到Chris的方法如何：
实际上，有一些主要框架，例如Bootstrap 4和Material Design指南，这些框架使用Rem单元确定文本内容的大小。
特别要提到的是Material-UI，这是React组件非常流行的集合。它们不仅以相同的方式调整文本大小，而且还提供了一种实现我们上面提到的“ 10px简化”的机制。
最近的另一个项目Every Layout以一种非常有启发性的方式将em和rem单元结合在一起。它与Chris Coyier的模型轮廓最接近，并且使用em单位强调内联元素，例如SVG图标，跨度或其他类似元素。
如您所见，没有“银弹”解决方案。可能的组合仅受开发人员的想象力限制。
将rems与Media Query Breakpoints一起使用
在媒体查询中使用em或rem单位与“最佳行长”的概念及其对阅读体验的影响密切相关。2014年9月，《粉碎杂志》（Smashing Magazine）发表了一篇有关网页排版的综合研究报告，名为《尺寸问题：在响应式网页设计中平衡行长和字体大小》。在许多其他有趣的事情中，文章对最佳行长进行了估算：介于45到75-85个字符之间（包括空格和标点符号），其中65个为“理想”目标值。
使用1rem = 1个字符的粗略估计，我们可以采用移动优先的方法来控制单列内容的文本流：
.container {
width: 100%;
}
@media (min-width: 85rem) {
.container {
width: 65rem;
}
}
但是，关于rem和em单位用作媒体查询单位时，有一个有趣的细节：它们始终保持相同的值1rem = 1em =浏览器设置的字体大小。媒体查询规范（添加了重点）中说明了这种现象的原因：
媒体查询中的相对单位基于初始值，这意味着单位绝不会基于声明的结果。例如，在HTML中，em单位是相对于font-size的初始值的，它由用户代理或用户的首选项定义，而不是页面上的任何样式。
让我们看一下这种行为的简单示例：
首先，在HTML中，我们有一个<span>元素将在其中写入视口的宽度：
Document width: <span></span>px
接下来，我们有两个媒体查询，一个带有rem单位，另一个带有em单位（为简单起见，使用Sass）：
html {
font-size: 62.5%; /* 62.5% of 16px = 10px */
@media (min-width: 20rem) {
/* 20*16px = 320px */
background-color: lemonchiffon;
font-size: 200%;
/* 200% of 16px = 32px */
}
@media (min-width: 30em) {
/* 30*16px = 480px */
background-color: lightblue;
font-size: 300%; /* 300% of 16px = 48px */
}
}
最后，我们使用一些jQuery在页面上显示视口宽度，并在窗口大小更改时更新值：
KaTeX parse error: Expected 'EOF', got '#' at position 27: …n style="color:#̲999999">(</span…(window).width());
$(window).on(‘resize’, function(e) {
KaTeX parse error: Expected 'EOF', got '#' at position 27: …n style="color:#̲999999">(</span…(window).width());
});
我们从62.5％的技巧开始，以表明修改后的根字体大小对用于媒体查询的值没有任何影响。当我们更改浏览器窗口的宽度时，我们可以看到第一个媒体查询以320px（20×16px）开始，而第二个媒体查询以480px（30×16px）开始活动。的没有font-size我们宣布改变对断点任何影响。更改媒体查询断点值的唯一方法是在浏览器设置中修改默认字体大小。
因此，我们是否将em或rem单位用于媒体查询断点并不重要。Zurb Foundation（在撰写本文时当前为v6.5.3）在媒体查询中使用em单位。
无障碍探索
上面我们已经看到，基于根字体大小进行缩放的功能使rem单元对于可访问性非常有用。Google开发人员建议使用相对单位进行文本大小调整。
Internet档案后面的人进行了一项实证研究，结果表明，有大量用户在浏览器设置中更改其默认字体大小。通过使用rem和其他相关单位，您可以尊重用户对他们想要浏览网络的方式的决定。
总结
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！
而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！
资料截图 ：
高级前端工程师必备资料包
3519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
