前端布局利器：rem 适配全面解析

引言

在当今多设备、多屏幕尺寸的时代，前端开发者面临着一个巨大的挑战：如何让网页在不同的设备上都能完美显示，提供一致的用户体验。为了解决这个问题，出现了许多布局适配方案，如媒体查询、flexbox、grid 等。而 rem 适配作为一种灵活且有效的布局方式，在前端开发中占据着重要的地位。本文将深入探讨 rem 适配的原理、使用方法以及实际应用中的注意事项。

什么是 rem

rem（root em）是一个相对单位，它是相对于根元素（html 元素）的字体大小来计算的。例如，如果根元素的字体大小设置为 16px，那么 1rem 就等于 16px；如果根元素的字体大小设置为 20px，那么 1rem 就等于 20px。与 px 这种固定单位不同，rem 具有灵活性，可以根据根元素的字体大小动态调整元素的尺寸。

rem 适配的原理

rem 适配的核心思想是通过动态改变根元素的字体大小，来实现页面元素在不同设备上的等比例缩放。具体来说，我们可以根据设备的屏幕宽度，计算出一个合适的根元素字体大小，然后将页面中所有元素的尺寸都使用 rem 单位来表示。这样，当屏幕宽度发生变化时，根元素的字体大小也会相应地改变，从而使得页面元素的尺寸也随之等比例缩放。

如何实现 rem 适配

手动计算

最简单的方法是手动计算根元素的字体大小和元素的 rem 值。假设我们以设计稿宽度为 750px 为例，设计稿上一个元素的宽度为 150px。我们可以先确定一个基准字体大小，比如在 750px 宽度的屏幕上，根元素字体大小设置为 100px。那么这个元素在设计稿上的宽度换算成 rem 就是：150 / 100 = 1.5rem。

在不同设备上，我们可以通过 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>
    <style>
        /* 设置元素的宽度为 1.5rem */
        .box {
            width: 1.5rem;
            height: 1.5rem;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 获取设备屏幕宽度
        const screenWidth = document.documentElement.clientWidth;
        // 设计稿宽度
        const designWidth = 750;
        // 基准字体大小
        const baseFontSize = 100;
        // 计算当前设备的根元素字体大小
        const rootFontSize = (screenWidth / designWidth) * baseFontSize;
        // 设置根元素字体大小
        document.documentElement.style.fontSize = rootFontSize + 'px';
    </script>
</body>

</html>

使用第三方库

vue2rem适配vue/cli

安装插件

想要适配我们需要安装postcss-pxtorem 和 amfe-flexible

csharp 复制代码

npm install postcss-pxtorem 
npm install amfe-flexible 
或者 
yarn add postcss-pxtorem 
yarn add amfe-flexible

配置amfe-flexible

需要在main.js 中引入amfe-flexible 才可以使用

arduino 复制代码

import 'amfe-flexible'

配置postcss-pxtorem

配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：

在vue.config.js中配置

css 复制代码

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue:  192.0, // 设计图除以10 设计图尺寸1920
                        unitPrecision: 5, // 转换成rem后保留的小数点位数
                        propList: ['*']// 匹配CSS中的属性，* 代表启用所有属性
                    })
                ]
            }
        }
    },
}

在.postcssrc.js或postcss.config.js中配置如下：

ruby 复制代码

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      // 配置文档：https://www.npmjs.com/package/postcss-pxtorem
      rootValue: 192.0, // 根元素字体大小 16/1.25  在1920* 1080 分辨率下
      unitPrecision: 5, // 转换成rem后保留的小数点位数
      propList: ["*"], // 匹配CSS中的属性，* 代表启用所有属性
      // exclude: /(node_module)/, // 忽略一些文件，不进行转换，默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      // selectorBlackList: [".van"], // 要忽略并保留为 px 的选择器
      // mediaQuery: false, //（布尔值）允许在媒体查询中转换px
      // minPixelValue: 1, // 设置要替换的最小像素值
    },
  },
};

直接可以使用

完成上述操作就可以直接在项目中使用了
上述操作是在1920 * 1080分辨率下的，根据自己的需求进行修改配置

xml 复制代码

<script setup>
</script>

<template>
  <div class="box"></div>
</template>

<style scoped>
.box {
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>

上面的示例就是在1920 * 1080 分辨率下px转换成rem,从而实现响应式布局
计算方式就是1.04167 * 192 约等于200px

安装

css 复制代码

npm i postcss-pxtorem  
npm i autoprefixer
npm i -S amfe-flexible

postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport

autoprefixer和postcss-pxtorem配置

根目录创建postcss.config.js文件

java 复制代码

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
      propList: ["*", "!border"], // 除 border 外所有px 转 rem
      selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
    },
  },
};

引入amfe-flexible

在main.js中引入amfe-flexible

arduino 复制代码

import "amfe-flexible";

rem 适配的优缺点

优点

灵活性高：rem 单位可以根据根元素的字体大小动态调整元素的尺寸，使得页面在不同设备上能够实现等比例缩放，提供一致的用户体验。
易于维护：使用 rem 单位可以将页面元素的尺寸与根元素的字体大小关联起来，当需要调整页面整体大小时，只需要修改根元素的字体大小即可。
兼容性好：rem 单位在现代浏览器中都有很好的支持，几乎可以在所有设备上正常使用。

缺点

需要额外的计算：使用 rem 单位需要进行一定的换算，尤其是在手动计算时，需要考虑设计稿宽度、基准字体大小等因素，增加了开发的复杂度。
不适用于所有场景：对于一些对精度要求较高的布局，rem 适配可能无法满足需求，因为它是基于等比例缩放的，可能会导致元素尺寸出现一些微小的偏差。

注意事项

字体大小的设置：在使用 rem 适配时，需要注意根元素字体大小的设置。如果根元素字体大小设置得过大或过小，可能会影响页面的布局和显示效果。
兼容性问题：虽然 rem 单位在现代浏览器中都有很好的支持，但在一些老旧浏览器中可能存在兼容性问题。在使用时需要进行充分的测试。
结合其他布局方式：rem 适配并不是万能的，在实际开发中可以结合其他布局方式，如媒体查询、flexbox、grid 等，以实现更加复杂和灵活的布局。

总结

rem 适配是一种非常实用的前端布局适配方案，它通过动态改变根元素的字体大小，实现了页面元素在不同设备上的等比例缩放。无论是手动计算还是使用第三方库，都可以帮助我们轻松实现 rem 适配。当然，在使用 rem 适配时，我们也需要注意一些问题，结合其他布局方式，以达到最佳的布局效果。希望本文能够对大家理解和使用 rem 适配有所帮助。

以上就是关于 rem 适配的详细介绍，大家在实际开发中可以根据项目需求选择合适的适配方案。如果你有任何疑问或建议，欢迎在评论区留言交流,如果喜欢看uncleTom的文章可以帮忙点个关注和收藏。