引言：从“固定”到“灵活”的华丽转身
想象一下，如果我们的网页能像变形金刚一样，在不同的屏幕上自动调整自己的大小和布局，那该多酷！而实现这个梦想的秘诀之一就是使用相对单位 rem。今天，我们将一起探索如何通过 rem 来让我们的 H5 界面开发更加灵活、高效，还能跟上时代的步伐。
设计稿与交付成果
在开始之前，让我们先明确一点：我们拥有一个标注好的设计稿，并且最终要交付的是 HTML + CSS + JS 文件。这意味着我们需要先搭建好 HTML 的结构，然后再用 CSS 来美化它。同时，我们会遵循文档流的原则，以及盒模型的规则来构建两列的布局。
适配之道：告别px，拥抱rem
对于移动端开发来说，使用固定的像素（px）并不是一个好的选择，因为它们不会根据屏幕大小进行适配。相反，我们应该转向相对单位如 rem，它是相对于 <html> 元素的 font-size 来计算的。这样，当 <html> 的字体大小改变时，所有基于 rem 定义的元素也会相应地调整其大小。
实现750px和828px的设计稿转换
假设我们有750px宽的设计稿，为了方便等比例缩放，我们可以设定10 rem = 750px，即1 rem = 75px，因此 <html> 的 font-size 应设置为75px。同理，对于828px宽的设计稿，10 rem = 828px，则1 rem = 82.8px，所以 <html> 的 font-size 就是82.8px。
动态调整：JS代码让适配更智能
为了让页面能够根据不同的屏幕宽度动态调整 <html> 的 font-size，我们可以使用一段JavaScript代码。这段代码会在页面加载时立即执行，并且每当窗口大小发生变化时重新计算并应用新的 font-size。下面是一个简单的例子：
// 立即执行函数表达式 (IIFE)，确保代码在全局作用域中独立运行
(function() {
// 这个函数用于计算并设置 <html> 的 font-size
function calcFontSize() {
// 获取当前设备宽度
const deviceWidth = document.documentElement.clientWidth;
// 根据设计稿的宽度比例计算出合适的 font-size
const baseFontSize = 75; // 基于750px设计稿的基准值
const designWidth = 750; // 设计稿的宽度
// 设置 <html> 的 font-size，确保页面内容按比例缩放
document.documentElement.style.fontSize = `${baseFontSize * (deviceWidth / designWidth)}px`;
console.log(`Device width: ${deviceWidth}px, Setting html font-size to: ${document.documentElement.style.fontSize}`);
}
// 页面初次加载时调用一次 calcFontSize 函数
calcFontSize();
// 当窗口大小变化时，再次调用 calcFontSize 函数以更新 <html> 的 font-size
window.addEventListener('resize', calcFontSize);
})();
注释说明
- IIFE：这是一个立即执行函数表达式，用来创建一个局部作用域，防止变量污染全局命名空间。
- calcFontSize：这个函数负责计算
<html>元素的font-size，依据当前设备宽度和设计稿的比例。 - deviceWidth：获取浏览器视口的宽度。
- baseFontSize 和 designWidth：这两个常量定义了设计稿的基本参数，用于计算实际的
font-size。 - console.log：输出调试信息，帮助开发者理解当前设置。
- addEventListener：监听窗口大小的变化，以便及时调整页面的字体大小。
最终实现的结果
- 注意，在实现页面效果前记得将页面初始化：
<style>
* {
margin: 0;
padding: 0;
}
</style>
在经过了上面的js代码，在我们些样时，写盒子的长宽就能直接使用rem,并且上面我们设计的是10rem==页面的宽度，在我们设计页面只要根据各个盒子或者盒边距之间的比例就可以直接写上去了。例如你想要占到页面的一半宽：直接写5rem.
让我们看看下面的代码能实现什么效果吧！
<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;vertical-align: top;">111</div>
<div style="width: 5rem;height: 2rem;background-color: blue;display: inline-block;vertical-align: top;"></div>
</div>
</diV>
</body>
font-size: 0;：在外层容器中将字体大小设为0，目的是为了消除由inline-block元素之间可能出现的多余空白空间。display: inline-block;：让两个内部的<div>并排显示，同时允许它们拥有明确的宽度和高度。vertical-align: top;：确保两个inline-block的<div>都从它们所在行的顶部开始对齐，避免因为基线对齐而造成的布局问题。
最终效果：
iphone XR:
iPad Pro:
结语：享受灵活适配带来的乐趣
通过以上方法，我们可以轻松地让我们的H5界面在各种移动设备上保持一致的外观和用户体验。不仅如此，使用 rem 和 JavaScript 动态调整 <html> 的 font-size，还可以使我们的网站更加友好地适应未来可能出现的新设备。所以，不要害怕改变，尝试将这些技巧融入到你的项目中吧！你会发现，原来适配也可以这么简单有趣！
希望这篇文章不仅教会了你一些技术上的知识，还让你感受到了编程背后的乐趣。如果你觉得有用，请点赞、分享给更多的人看到。当然，也欢迎你在评论区留言交流，一起探讨更多的可能性！
