Rem 自适应原理与应用

news2024/10/1 19:33:24

前言

移动端适配有很多方案，这篇文章将根据 rem 自适应的原理进行讲解，接下来跟着作者的思路一起来看看吧！

原理

在搞清楚 rem 适配之前，我们先来了解一下什么是 rem？

rem 是一种相对长度单位，它相对于根元素的字体大小（即HTML元素的字体大小）来计算。它的特点是可以根据根元素的字体大小进行缩放，从而实现页面元素的自适应。

举个栗子来说明 rem 的用法：

假设我们将根元素的字体大小设置为 16px，然后我们想要设置一个段落的文字大小为 20px。如果我们使用 rem 单位，我们可以这样设置：

html {
  font-size: 16px; /* 设置根元素字体大小为16px */
}

p {
  font-size: 1.25rem; /* 设置段落的文字大小为根元素字体大小的1.25倍 */
}

在这个栗子中，1rem 等于根元素的字体大小，即16px，所以设置段落的字体大小为 1.25rem 就相当于 20px（16px * 1.25 = 20px）。

一句话总结

rem：相对于根元素的 fontSize 大小，也就是 html 的fontSize大小。

实现

上面我们说了，我们需要根据尺寸的不同去动态修改根元素的字体大小，那实现工作就转换成了

先检测窗口尺寸变化

修改根元素字体大小

好的既然已经知道怎么实现了，我们再来理一下实现思路！

如果我们按照上面的栗子，将段落的文字大小设置为 1.25rem，然后根据移动端机型尺寸大小的不同，去动态修改根元素，也就是 html 的 font-size 的大小。

如果根元素的字体大小发生变化，rem 会自动进行计算，从而改变段落字体的大小，这样是不是就实现了自适应。

所以我们现在需要将段落字体大小写成 1.25rem，注意这里需要写死，随着窗口的变化，1.25rem 会自动进行计算。

那如果所有的 px 单位我们都手动写成 rem 是不是有些麻烦，我们需要自己去计算，不太符合我们的实际开发。

我们肯定希望只写 px 单位，rem 可以自动转换。

这里就介绍一下 postcss-pxtorem 这款插件。

postcss-pxtorem插件

postcss-pxtorem 是一个 PostCSS 插件，用于将像素单位（px）转换为 rem 单位，以便更好地适应不同屏幕尺寸和密度。

安装

npm install postcss-pxtorem --save-dev

配置

// postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 10, // 1rem 等于 10px
      propList: ['*'], // 所有属性都转换
    },
  },
};

使用

安装并配置好 postcss-pxtorem 后，在编写 CSS 时，你可以使用 px 单位，插件会自动将其转换为 rem 单位。

/* 输入 */
.example {
  font-size: 16px;
  margin: 20px 10px;
}

/* 输出 */
.example {
  font-size: 1rem; /* 如果 rootValue 设置为 16 */
  margin: 1.25rem 0.625rem;
}

如图所示：

这样一来，我们只需要负责编写 px 即可，转换 rem 的事情交给插件即可。

注意：如若vue-cli-service的版本为5，则按以上配置。如若vue-cli-service的版本为4，可直接在vue.config.js中进行配置。详情可参考下面这篇文章。

参考链接如下：(23条消息) vue项目中postcss-pxtorem的配置失败问题 style-resources-loader的相关配置_postcss-pxtorem不生效_清9余人的博客-CSDN博客

监听窗口变化

上面我们已经使用插件将 px 转化成了 rem，接下来我们就需要检测窗口的变化，动态修改 rem 即可。

创建 src\plugin\flexible\index.js

/* eslint-disable */
(function () {
  changeSize()
  function changeSize() {
    document.documentElement.style.fontSize = (document.documentElement.clientWidth * 10) / 375 + 'px'
  }
  window.addEventListener('resize', changeSize, false)
  // 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      changeSize()
    }
  })
})()

这是一段自执行代码，我们把它引入 main.js，页面加载时将会自动执行。

这里的 html 字体大小利用了一个简单的数学公式，当我们默认设置以屏幕 375px 为基准，此时的字体大小为 10px

那么浏览器窗口大小改变的时候新的 htm 的 fontSize（clientWidth 新的值）就是clientWidth*10/375（交叉相乘）