让页面像流水一样灵活移动：Vue移动端rem适配，两步搞定！

前端

2023-06-16 00:03:02

移动端适配：如何将 Vue 项目中的 px 轻松转化为 rem

在现代网络开发中，响应式设计至关重要，它使我们的网站能够流畅地适应各种设备屏幕尺寸。实现响应式布局最有效的方法之一是使用相对单位，例如 rem 。

什么是 px 和 rem？

px（像素） 是一个绝对单位，表示屏幕上的一个像素。它在所有设备上保持恒定，无论屏幕分辨率如何。

rem（根 em） 是一个相对单位，相对于根元素的字体大小。当更改根元素的字体大小时，所有使用 rem 单位的元素也会相应地调整大小。

为什么要使用 rem？

使用 rem 进行移动端适配的主要优点是：

灵活性： 我们可以动态调整根元素的字体大小以匹配不同的屏幕尺寸，从而实现元素的自动缩放。
代码可读性： 使用 rem 单位可以使 CSS 代码更易于阅读和维护，因为我们不必为每个屏幕尺寸指定显式像素值。
性能： 由于浏览器不需要计算每个元素的绝对像素值，因此使用 rem 单位可以提高渲染性能。

将 px 转换为 rem 的两种方法

1. CSS 媒体查询

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) {
  body {
    font-size: 16px;
  }
}

这种方法简单，但需要为每个目标屏幕尺寸编写单独的媒体查询规则。对于屏幕尺寸种类繁多的情况，这可能会导致大量的代码。

2. JS 动态设置根元素字体大小

function setRootFontSize() {
  // 获取设备屏幕宽度
  var screenWidth = document.documentElement.clientWidth;

  // 根据屏幕宽度设置根元素字体大小
  if (screenWidth < 768) {
    document.documentElement.style.fontSize = '14px';
  } else {
    document.documentElement.style.fontSize = '16px';
  }
}

window.addEventListener('resize', setRootFontSize);

此方法更灵活，因为它允许根据屏幕尺寸动态调整根元素的字体大小。然而，它需要使用 JavaScript，并且在某些情况下可能更复杂。

代码示例

以下代码示例演示了如何将 Vue 项目中的 px 值转换为 rem：

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

  .container {
    width: 320px;
    padding: 16px;
    margin: 10px;
  }
</style>

<template>
  <div class="container">
    <h1>Hello, Vue!</h1>
    <p>This is a paragraph with 16px font size.</p>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.setRootFontSize();
    },
    methods: {
      setRootFontSize() {
        // 获取设备屏幕宽度
        var screenWidth = document.documentElement.clientWidth;

        // 根据屏幕宽度设置根元素字体大小
        if (screenWidth < 768) {
          document.documentElement.style.fontSize = '14px';
        } else {
          document.documentElement.style.fontSize = '16px';
        }
      }
    }
  }
</script>