不会吧，你还不会用 rem 打造自适应页面吗🤔？

引言

在我们日常访问网站时会发现，不论是使用手机、平板还是电脑来访问同一个页面，这个页面的布局都是大差不差的，但是设备屏幕尺寸却差异巨大，而且每种设备都有不同的分辨率和像素密度，到底是如何确保网页内容能在各种设备上都能显示正常呢？那么就要介绍今天的主角---采用响应式设计策略中的核心组成部分之一，即流体网格布局。

流体网格布局（Fluid Grid Layouts）

流体网格布局通过使用相对单位 和比例关系来创建一个可以随着屏幕尺寸变化而自动调整的布局。与我们传统开发的固定宽度布局不同，流体网格布局能够确保页面元素在各种设备上都能保持良好的视觉效果和用户体验。

基本概念：

我们需要了解上述介绍中的两个重要的概念：

流体：意味着网格中的每一项（如列、行或容器）不是基于固定的像素值定义，而是使用相对单位（如百分比%、em、rem等），使它们可以根据浏览器窗口大小动态调整。
网格：是指用于组织页面内容的一种结构化方式，通常由多个相等宽度的列组成，这些列之间有固定的间距（gutter）。每个列可以容纳不同的网页组件。

相对单位 rem：

这里我们重点介绍 rem 相对单位来演示使用了流体网格布局的效果。

rem是相对于根元素（即HTML文档的根元素 <html>）的字体大小来计算的单位，每个rem单位等于根元素的字体大小。在默认情况下<html style="font-size:16px">，所以1rem = 16px，当然我们也可以自行修改来调整rem的大小。如下代码，在不对默认字体大小进行改变时，我们创建两个色块来查看效果。

css 复制代码

<body>
    <div style="width:30rem;height:10rem;background-color: red;"></div>
    <div style="width:15rem;height:10rem;background-color: green;"></div>
</body>

添加上述代码后我们会发现，在移动端设备的宽度小于30rem(480px)时我们会看到色块有溢出，那么这和直接设置 px 有什么区别吗？

这里就要使用与rem有关联的字体大小了，假如我们得到的设计稿上面默认这个页面的宽度为750px，而且要求这个色块的宽度要350px，我们就不妨将页面宽度分为10份rem（即1rem = 75px），这样色块的宽度也就是5rem，但是别的设备页面可能并不是750px，但是我们的目的都是将色块的宽度设为页面宽度的一半，那么为何不通过获取用户页面的宽度来分为10rem，再将色块设为5rem，这就完成了缩放，当然将rem设置为多少都可以，只要方便计算。

并且如果我们假设在设计稿上需要15px的宽度，那么就可以设置为 (15/75)rem ，我们需要350px就可以设置为(350/75)rem。

如图：

所以接下来只需要获取页面的宽度，再设置字体就完成了动态缩放，来跟着步骤尝试一下吧：

我们在标题下方添加一个<script>，并在内部添加一个立即执行函数，即(function(){ 函数内代码 })()，而在这个位置添加的原因就是 HTML 文档运行时遇到 <script> 标签，它会暂停构建 DOM（文档对象模型）和渲染页面，直到该脚本被完全加载、解析和执行完毕。所以在这里添加会先进行我们设置font-size的操作在进行加载页面。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        (function () {
            
        })()
    </script>
</head>

再在内部创建一个函数来获取设备的宽度，并且我们可以先打印出来看看是否获取到了我们所需的宽度。

html 复制代码

<script>
    (function () {
        function calc() {
            // document.documentElement 返回 HTML 文档的根元素
            const w = document.documentElement.clientWidth;
            console.log(w);
        }
        calc();
    })()
</script>

这样我们就获取到了页面的宽度，然后再修改文字大小为我们预想的rem的大小，例如设计图上宽度为 750px ，我想设置rem为 75px 来计算，那么文字大小 = (w / 750) * 75 + 'px'。

html 复制代码

<script>
    (function () {
        function calc() {
            // document.documentElement 返回 HTML 文档的根元素
            const w = document.documentElement.clientWidth;
            // console.log(w);
            document.documentElement.style.fontSize = (w / 750) * 75 + 'px';
        }
        calc();
    })()
</script>

这就完了吗？当然不是，我们发现在切换设备时，我们需要重新刷新页面才能获取到新页面的宽度，这显然是不符合用户的预期的，所以我们要监听窗口大小的变化，当窗口发生改变后我们就立即执行calc()来调整rem的值

html 复制代码

<script>
    (function () {
        function calc() {
            // document.documentElement 返回 HTML 文档的根元素
            const w = document.documentElement.clientWidth;
            // console.log(w);
            document.documentElement.style.fontSize = w / 10 + 'px';
        }
        calc();
        // 监听窗口大小变化 
        window.onresize = function() {
            calc();
        }
    })()
</script>

接下来就是小优化了，我们可以将色块默认的边缘和填充去除，这样就可以填满一整行了。

css 复制代码

* {
    margin: 0;
    padding: 0;
}

再添加我们的色块来展示一下效果

html 复制代码

<body>
    <div style="width:10rem;height:3rem;background-color: red;"></div>
    <div style="width:5rem;height:3rem;background-color: green;"></div>
</body>

来看看效果吧！！！

无论我们切换任何设备都是保持红色的色块填充满一整行，绿色为一半。

总结：

通过采用基于rem单位的流体网格布局，再结合JavaScript动态调整根元素字体大小，就可以实现网页内容在不同设备和屏幕尺寸上的自适应显示，确保布局的一致性和最佳用户体验。

---欢迎各位点赞、收藏、关注，如果觉得有收获或者需要改进的地方，希望评论在下方，不定期更新