移动端适配rem方案

news2025/1/11 6:17:31

做移动端的适配我们就是要考虑，对于不同大小的手机屏幕，怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。

这个问题我们可以使用相对单位rem。

那么什么是 rem？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。设置 html 的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。

比如说：我们设置了根元素字体大小为37.5，之后如果有一个盒子宽为75px,则，我们可以给盒子设置成2rem。

那么接下来，我们要做得就是根据屏幕大小动态改变根元素的font-size了

比如说，有一个宽高都为2rem的盒子。当在一个很小的屏幕上展示的时候，我们把font-size设置为37.5。那么这个盒子展示出来的就是75px * 75px的正方形。当在一个大屏幕上展示的时候，我们把font-size设置成75px，那么这个盒子展示出来的就是150px乘以150px的正方形。

1. rem+动态html的font-size

1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。
2.比如如下案例：
设置一个盒子的宽度是2rem；
设置不同的屏幕上html的font-size不同；

3.这样在开发中，我们只需要考虑两个问题：
问题一：针对不同的屏幕，设置html不同的font-size；
问题二：将原来要设置的尺寸，转化成rem单位；

2. rem的font-size尺寸

2.1 方案一：媒体查询

可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸；
缺点：
1.我们需要针对不同的屏幕编写大量的媒体查询；
2.如果动态改变尺寸，不会实时的进行更新；(媒体查询只能修改某个范围区间里面的html的字体大小，在这个区间里面，盒子大小都是一样的，我们是希望实时改变的)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen and (min-width: 320px) {
      html {
        font-size: 20px;
      }
    }

    @media screen and (min-width: 375px) {
      html {
        font-size: 24px;
      }
    }

    @media screen and (min-width: 414px) {
      html {
        font-size: 28px;
      }
    }

    @media screen and (min-width: 480px) {
      html {
        font-size: 32px;
      }
    }

    .box {
      width: 5rem;
      height: 5rem;
      background-color: orange;
    }
  </style>
</head>
<body>

  <div class="box">

  </div>

</body>
</html>

2.2 方案二：编写js代码

如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码；
方法：
1.根据html的宽度计算出font-size的大小，并且设置到html上；
2.监听页面的实时改变，并且重新设置font-size的大小到html上；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="./js/hy_flexible.js"></script>

  <style>
    body {
      font-size: 16px;
    }

    .box {
      width: 5rem;
      height: 5rem;
      background-color: orange;
    }

    p {
      font-size: 0.5rem;
    }
  </style>
</head>
<body>

  <div class="box">

  </div>

  <p>我是文本</p>

  <!-- 动态的修改html的font-size -->
  <span>哈哈哈哈哈哈</span>

</body>
</html>

// 1.获取html的元素
const htmlEl = document.documentElement;

function setRemUnit() {
  // 2.获取html的宽度(视口的宽度)
  const htmlWidth = htmlEl.clientWidth;
  // 3.根据宽度计算一个html的font-size的大小
  const htmlFontSize = htmlWidth / 10;
  // 4.将font-size设置到html上
  htmlEl.style.fontSize = htmlFontSize + "px";
}
// 保证第一次进来时, 可以设置一次font-size
setRemUnit();

// 当屏幕尺寸发生变化时, 实时来修改html的font-size
window.addEventListener("resize", setRemUnit);

3. vue项目中使用 postcss-pxtorem

首先，在项目中引入css转rem的插件

npm i postcss-pxtorem -D

在项目根目录下新建 .postcssrc.js 配置文件，配置代码如下：

module.exports = {
    plugins: {
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 37.5, // 设计稿宽度的1/10
            "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
}

有了这个之后，我们就不用每次去手动计算多少px需要写成多少rem了。比如我们拿到的设计稿宽度是375px(上边代码的rootValue我们写成37.5) ，里面有一个375px*375px的正方形。我们直接写375px就行，这个插件会自动帮我们计算width和height是10rem