移动端适配方案：Vue 项目 rem 布局与 viewport 设置实战

码上前端

已于 2025-04-25 08:56:16 修改

阅读量1k

点赞数 23

分类专栏： vue.js 文章标签： vue.js 前端 javascript node.js 前端框架

于 2025-04-25 08:55:51 首次发布

本文链接：https://blog.csdn.net/qq_65243376/article/details/147498061

版权

vue.js 专栏收录该内容

38 篇文章

订阅专栏

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

一、引言

在移动应用开发中，不同设备的屏幕尺寸和分辨率差异很大，为了让页面在各种移动设备上都能完美显示，需要采用合适的移动端适配方案。本文将详细介绍在 Vue 项目中使用 rem 布局和 viewport 设置的适配方案，并给出具体的实战示例。

二、rem 布局原理

rem（root em）是一个相对单位，它相对于根元素（html 元素）的字体大小。通过设置根元素的字体大小，我们可以根据设计稿的尺寸，将元素的尺寸用 rem 单位来表示，从而实现页面的自适应布局。

三、viewport 设置

viewport 是指浏览器中用于显示网页的区域。在移动端，通过设置 viewport 的相关属性，可以控制页面的缩放和布局。常见的 viewport 设置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

width=device-width：将 viewport 的宽度设置为设备的宽度。
initial-scale=1.0：初始缩放比例为 1。
maximum-scale=1.0：最大缩放比例为 1。
minimum-scale=1.0：最小缩放比例为 1。
user-scalable=no：禁止用户手动缩放页面。

四、实战步骤

（一）创建 Vue 项目

首先，使用 Vue CLI 创建一个新的 Vue 项目：

vue create mobile-adaptation-demo
cd mobile-adaptation-demo

（二）设置 viewport

在 public/index.html 文件中添加 viewport 设置：

<!DOCTYPE html>
<html lang="">
  <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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

（三）设置根元素字体大小

在 src 目录下创建一个 utils 文件夹，并在其中创建一个 rem.js 文件，用于动态设置根元素的字体大小：

// rem.js
export function setRem() {
  const designWidth = 750; // 设计稿宽度
  const html = document.documentElement;
  const clientWidth = html.clientWidth;
  if (clientWidth >= 750) {
    html.style.fontSize = '100px';
  } else {
    html.style.fontSize = (clientWidth / designWidth) * 100 + 'px';
  }
}

// 初始化
setRem();

// 监听窗口大小变化
window.addEventListener('resize', setRem);

在 main.js 中引入 rem.js：

// main.js
import Vue from 'vue';
import App from './App.vue';
import './utils/rem';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

（四）使用 rem 布局

在组件中使用 rem 单位进行布局。例如，在 src/components 目录下创建一个 TestComponent.vue 组件：

<template>
  <div class="container">
    <div class="box">这是一个测试盒子</div>
  </div>
</template>

<script>
export default {
  name: 'TestComponent'
};
</script>

<style scoped>
.container {
  width: 7.5rem; /* 设计稿宽度 750px，对应 7.5rem */
  margin: 0 auto;
}

.box {
  width: 3rem; /* 设计稿宽度 300px，对应 3rem */
  height: 2rem; /* 设计稿高度 200px，对应 2rem */
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 2rem;
  font-size: 0.32rem; /* 设计稿字体大小 32px，对应 0.32rem */
}
</style>

在 App.vue 中使用 TestComponent 组件：

<template>
  <div id="app">
    <TestComponent />
  </div>
</template>

<script>
import TestComponent from './components/TestComponent.vue';

export default {
  name: 'App',
  components: {
    TestComponent
  }
};
</script>

<style>
#app {
  
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

五、总结

通过使用 rem 布局和合理设置 viewport，我们可以在 Vue 项目中实现移动端页面的自适应布局。rem 布局利用相对单位的特性，根据根元素的字体大小自动调整元素的尺寸，而 viewport 设置则确保页面在不同设备上以合适的比例显示。在实际开发中，我们可以根据设计稿的尺寸，将元素的尺寸转换为 rem 单位，从而实现页面在各种移动设备上的完美适配。