在前端开发的世界里，界面的设计和布局是至关重要的一环。尤其是在当今多设备、多屏幕尺寸的时代，如何让我们的页面在各种设备上都能完美呈现，是每个前端开发者都需要面对的挑战。今天，我们就来探讨两个前端界面开发中的小知识点：rem 相对单位的作用以及如何动态设置 html 的 font - size。
开发流程与基础知识
在开始之前，我们先了解一下 h5 界面开发的基本流程。通常，我们会拿到标注好的设计稿，然后开始编写 html、css 和 js 代码。开发时遵循先构建 html 结构，再添加 css 样式的顺序。其中，文档流和盒模型是布局的基础，比如常见的两列布局就需要运用这些知识。
适配的重要性与单位选择
在进行移动端适配时，我们要尽量避免使用 px 这种绝对大小的单位。因为不同设备的屏幕尺寸和分辨率差异很大，使用 px 可能会导致页面在某些设备上显示变形。所以，我们更倾向于使用相对单位，比如 rem。
rem 相对单位的作用
rem 是一个相对单位，它的大小是相对于 html 元素的 font - size 来计算的。这种相对计算的方式让我们在进行页面布局时更加灵活，能够轻松实现等比例缩放。
举个例子，假设我们有一个 750px 宽度的设计稿，为了方便等比例计算，我们可以将 10rem 设定为 750px，那么此时 html 的 font - size 就是 75px。也就是说，在这个页面中，1rem 就等于 75px。如果某个元素的宽度在设计稿上是 150px，那么在代码中我们就可以将它的宽度设置为 2rem（150÷75 = 2）。
如果设计稿的宽度是 828px，我们同样可以将 10rem 设定为 828px，此时 html 的 font - size 就是 82.8px。通过这种方式，无论设计稿的尺寸如何变化，我们都可以方便地进行等比例布局。
如果像是下面这样直接给出固定size大小，在某个界面可能合适，但是换一个窗口就原形毕露了，不太合乎我们的设计理念，所以rem才是正途。
动态设置 html 的 font - size
在实际开发中，不同设备的屏幕宽度是不一样的。为了让页面在各种设备上都能等比例缩放，我们需要动态地设置 html 的 font - size。下面我们来看一下具体的实现方法。
代码实现
<!DOCTYPE html>
<html lang="en" style="font-size:75px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 阻塞 来动态设置 html 的 font-size
// 立即执行函数
(function(){
function calc(){
const width = document.documentElement.clientWidth;// 页面宽度
document.documentElement.style.fontSize = 75*(width / 750)+'px';
}
// 当页面窗口改变 执行 calc()
window.onresize = function(){
calc();
}
})()
</script>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<div style="width: 10rem;height: 2rem;background-color: red;"></div>
<div style="font-size: 0;">
<div style="width: 5rem;height: 2rem;background-color: green;display: inline-block;font-size: 20px;color: white;">111</div>
<div style="width: 5rem;height: 2rem;background-color: blue;display: inline-block;font-size: 20px;color: white;">222</div>
</div>
</div>
</body>
</html>
实现如下，每次切换窗口html的font-size也会随之改变，更符合日常开发所需，以后别天天就整固定的px了，rem更加分。
代码解释
- 立即执行函数：在代码中，我们使用了一个立即执行函数来封装动态设置
font - size的逻辑。这样可以避免变量污染全局作用域。 - calc 函数：
calc函数的作用是计算并设置html的font - size。它首先获取当前页面的可视宽度document.documentElement.clientWidth，然后根据设计稿的宽度（这里是 750px）进行计算，得出新的font - size值，并将其赋值给document.documentElement.style.fontSize。 - 窗口大小改变事件：通过监听
window.onresize事件，当用户调整浏览器窗口大小或者在不同设备上打开页面时，会触发calc函数，从而动态更新html的font - size，保证页面元素能够等比例缩放。
不小心删除的意外
但是我在学习时却碰到这种情况，我只是把蓝色块的文字“222”移除，却导致绿色上面出现空白，这是什么情况？为什么有“222”才会对齐呢？听我细细道来。
1.原因：不对齐是因为 inline - block 元素默认基线对齐 。绿色 div 有文字“111”，基线位置靠下，蓝色 div 无内容，基线位置在底部，导致视觉上错位。
2.结果：添加“222”后，蓝色 div 也有了文字内容，两个 div 基线位置一致 ，所以看起来就对齐了。本质是基线对齐规则下，元素内容对基线位置产生影响，内容一致时基线位置相同，布局视觉上就对齐了。
3.解决方案：设置垂直对齐方式——给绿色和蓝色 div 添加 vertical-align: top 样式，使其顶部对齐，就能实现两边对齐。
<div style="font-size: 0;">
<div style="width: 5rem;height: 2rem;background-color: green;display: inline-block;font-size: 20px;color: white;vertical-align: top;">111</div>
<div style="width: 5rem;height: 2rem;background-color: blue;display: inline-block;font-size: 20px;color: white;vertical-align: top;"></div>
</div>
细节小挖
在上述HTML代码中：
- 绿色和蓝色 div 的初始情况：绿色 div 有文字内容“111” ，蓝色 div 没有文字内容 。它们都设置了 display: inline - block ，且
vertical-align属性未显式设置（默认值为 baseline ）。对于有文字的绿色 div ，其基线位置由文字的基线决定，文字底部所在位置就是它的基线位置 。而蓝色 div没有文字，它的基线位置默认在其底部（块级元素内没有文本等内容时，基线位置在底部 ）。所以，由于两者基线位置不一致，导致在视觉上看起来没有对齐。 - 为什么添加文字后对齐：当在蓝色 div 中添加文字“222”后 ，此时蓝色 div 的基线位置也由文字的基线决定了 。这样一来，绿色 div 和蓝色 div 的基线位置都由各自内部文字的基线决定，两者
基线位置一致，从视觉上看这两个 div 就对齐了 。
ps：基线对齐是CSS中一种垂直对齐方式，通过 vertical-align 属性实现，其默认值 baseline 就表示基线对齐 。在这种对齐方式下，各种行内（ inline ）元素和行内块（ inline - block ）元素会保持其基线与父元素的基线对齐 。例如，当图片和文字混排时，若未设置其他 vertical-align 值，图片底端会贴着父元素基线，可能出现和文字底部不对齐的情况 。
总结
通过使用 rem 相对单位和动态设置 html 的 font - size，我们可以轻松实现页面在不同设备上的等比例适配。rem 单位让我们的布局更加灵活，而动态设置 font - size 则确保了页面在各种屏幕尺寸下都能完美呈现。在实际开发中，我们可以根据设计稿的尺寸和需求，灵活运用这些技巧，提升用户的浏览体验。
希望这篇文章能帮助你更好地理解 rem 单位和动态设置 html 字体大小的方法，让你的前端开发之路更加顺畅！
