前端必备技能 | 使用rem实现移动页面响应式

在当今的移动互联网时代，确保网页在各种移动设备上都能完美显示是至关重要的。响应式设计是实现这一目标的关键技术之一，而使用 rem 单位是实现移动端响应式页面的一种有效方法。本文将详细介绍如何使用 rem 单位来创建响应式的移动端页面，并结合具体代码进行讲解。

什么是 rem 单位

rem（root em）是一个相对单位，它相对于根元素（即元素）的字体大小。例如，如果元素的字体大小设置为 16px，那么 1rem 就等于 16px；如果元素的字体大小变为 20px，那么 1rem 就等于 20px。这种相对性使得 rem 单位在实现响应式设计时非常有用，因为我们可以通过动态改变根元素的字体大小来调整整个页面的布局。

为什么选择 rem 单位进行移动端响应式设计

在移动端开发中，我们通常会避免使用固定的像素单位（px），因为不同设备的屏幕尺寸和分辨率差异很大。使用 px 单位可能会导致页面在某些设备上显示过大或过小。而 rem 单位可以根据根元素的字体大小进行自适应调整，从而确保页面在不同设备上都能保持一致的布局和视觉效果。

设计稿与 rem 的换算关系

在实际开发中，我们通常会拿到一份设计稿，假设设计稿的宽度为 750px。为了方便换算，我们可以将 10rem 对应设计稿的 750px，那么 1rem 就等于 75px。也就是说，当元素的字体大小设置为 75px 时，我们可以直接根据设计稿上的尺寸进行 rem 换算。

例如，设计稿上一个元素的宽度为 150px，那么在代码中我们可以将其宽度设置为 2rem（150px / 75px = 2rem）。

动态设置根元素字体大小

为了实现页面的响应式布局，我们需要根据设备的屏幕宽度动态调整根元素的字体大小。可以通过 JavaScript 来实现这一点。以下是一个示例代码：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 rem 实现响应式页面</title>
    <script>
        // 立即执行函数
        (function(){
            function calc(){
                // 获取设备屏幕的宽度
                const w = document.documentElement.clientWidth;
                console.log(w);
                // 750 是设计稿的宽度
                document.documentElement.style.fontSize = 75 * (w / 750) + 'px';
            }
            // 首次加载时计算并设置根元素字体大小
            calc();
            // 当窗口大小改变时重新计算并设置根元素字体大小
            window.onresize = function(){
                calc();
            }
        })();
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- 使用 rem 单位设置元素的宽度和高度 -->
    <div style="width: 10rem;height: 2rem;background-color: red;"></div>
    <!-- 换行符为 0 -->
    <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">222</div>
    </div>
</body>
</html>

代码解释：

立即执行函数：使用立即执行函数来封装代码，避免全局变量污染。

calc 函数：该函数用于计算并设置根元素的字体大小。首先获取设备屏幕的宽度 w，然后根据设计稿的宽度 750px 计算出根元素的字体大小，公式为 75 * (w / 750)。

首次加载：页面首次加载时，调用 calc 函数计算并设置根元素的字体大小。

窗口大小改变：当窗口大小改变时，监听 resize 事件，再次调用 calc 函数重新计算并设置根元素的字体大小。

实际应用示例

下面是一个更复杂的实际应用示例，展示了如何使用 rem 单位实现一个响应式的商品列表页面：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式商品列表页面</title>
    <script>
        (function(){
            function calc(){
                const w = document.documentElement.clientWidth;
                console.log(w);
                document.documentElement.style.fontSize = 75 * (w / 750) + 'px';
            }
            calc();
            window.onresize = function(){
                calc();
            }
        })();
    </script>
    <style>
        *{
            margin: 0;
            padding: 0; 
        }
        ul,li{
            list-style: none;
        }
        html,body{
            height: 100%;
        }
        .item-section{
            min-height: 100%;
            background-color: rgb(205, 3, 3);
            position: relative;
            font-size: 24px;
        }
        .item-section_header img{
            width: 10rem;
        }
        .item-section ul{
            padding: 0.133333rem;
        }
        .flag{
            display: table;
            width: 100%;
            margin-bottom: 1px;
            background-color: #fff;
        }
        .flag .flag-item{
            display: table-cell;
            padding: 0.16rem 0;
            vertical-align: top;
            background-color: #fff;
        }
        .flag .flag-item.figure{
            width: 2.3467em;
            height: 2.3467em;       
        }
        .flag .flag-item.figure img{
            width: 2.3467em;
            height: 2.3467em;       
        }
        .flag .flag-title a{
            font-size: 14px;
            color: #333;
            line-height: 1.25;
            text-align: center;
            text-decoration: none;
        }
        .flag .flag-item.figcation{
        }
    </style>
</head>
<body>
    <div class="item-section">
        <div class="item-section_header">
            <h2>
                <img src="https://vcg00.cfp.cn/creative/vcg/800/new/VCG211400758273.jpg" alt="">
            </h2>
            <ul>
                <li class="flag">
                    <a href="#" class="figure flag-item">
                        <img src="https://img01.yzcdn.cn/upload_files/2020/07/12/FpqXmM2BqlctoMg5D5XpGI9utw9r.png%21middle.jpg" alt="">
                    </a>
                    <div class="figcation flag-item">
                        <div class="flag-title">
                            <a href="#">
                                我是鞋子 我是鞋子我我我子我是鞋子
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

代码解释：

根元素字体大小设置：与前面的示例相同，通过 JavaScript 动态设置根元素的字体大小。

页面布局：使用 rem 单位来设置元素的宽度、高度、内边距等属性，确保页面在不同设备上都能自适应显示。

商品列表：使用 display: table 和 display: table-cell 来实现商品列表的布局，每个商品项包含图片和标题。

总结

使用 rem 单位是实现移动端响应式页面的一种简单而有效的方法。通过动态设置根元素的字体大小，我们可以根据设备的屏幕宽度自适应调整页面的布局。在实际开发中，我们只需要将设计稿上的像素尺寸换算成 rem 单位，就可以轻松实现响应式设计。希望本文能帮助你更好地理解和应用 rem 单位来创建移动端响应式页面。