可视化大屏系列（6）：多端适配-实现智慧工地 PC 端与大屏端的统一设计与适配策略

全栈探索者chen

于 2025-04-24 07:45:00 发布

阅读量1k

点赞数 25

分类专栏：可视化大屏文章标签：前端 vue 数据可视化 javascript vue.js 开发语言多端适配

本文链接：https://blog.csdn.net/mmc123125/article/details/147456414

版权

可视化大屏专栏收录该内容

6 篇文章

订阅专栏

可视化大屏系列（6）：多端适配-实现智慧工地 PC 端与大屏端的统一设计与适配策略

在这里插入图片描述

目录：

引言：多端适配的重要性与挑战
动态布局切换：为不同分辨率设备设计响应式布局
分辨率检测与响应：如何实现高效的分辨率检测
布局组件封装：封装可复用的布局组件
Element Plus + CSS 媒体查询结合技巧：完美实现自适应布局
总结与优化方向：提升性能与用户体验

一、引言：多端适配的重要性与挑战

在现代前端开发中，如何实现多端适配是一个不可忽视的课题，特别是在智慧工地系统这类需要兼顾 PC 端和大屏端（如监控大屏、会议大屏等）应用场景中。随着设备的多样性与分辨率的差异，如何保证所有设备在访问系统时都能获得良好的用户体验，成为设计和开发的重要目标。

对于智慧工地系统而言，PC 端的用户通常需要通过个人电脑或笔记本电脑来进行操作，而大屏端则主要用于信息的展示和实时监控。二者在尺寸、操作方式、交互需求等方面存在较大差异。因此，我们需要制定统一的适配策略，确保不同设备的访问者都能够获得流畅且高效的体验。

在本篇文章中，我们将详细介绍如何通过动态布局切换、分辨率检测与响应、布局组件封装等策略，确保智能工地系统在多端设备上都能呈现一致的体验。

二、动态布局切换：为不同分辨率设备设计响应式布局

下面将通过更详细的代码示例，展示如何为不同设备设计响应式布局，并通过动态布局切换来提升用户体验。

1. 利用 CSS 媒体查询适配不同设备

首先，我们使用 @media 媒体查询来适配不同的设备屏幕尺寸。通过指定不同的样式规则，可以根据屏幕宽度调整元素的布局。

代码示例：

/* 默认情况下，容器使用块级布局 */
.container {
  width: 100%;
  margin: 0 auto;
}

/* 针对PC端的布局 */
@media only screen and (min-width: 1024px) {
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .item {
    width: 30%;
  }
}

/* 针对平板设备的布局 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .item {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* 针对移动端的布局 */
@media only screen and (max-width: 768px) {
  .container {
    display: block;
  }
  .item {
    width: 100%;
    margin-bottom: 10px;
  }
}

HTML 示例：

<div class="container">
  <div class="item">内容 1</div>
  <div class="item">内容 2</div>
  <div class="item">内容 3</div>
</div>

说明：

默认情况下，.container 使用 block 显示。
当屏幕宽度大于等于 1024px（如桌面端）时，使用 flex 布局，将 .item 元素横向排列。
对于平板设备（屏幕宽度在 768px 到 1024px 之间），将布局切换为垂直排列。
对于移动端（屏幕宽度小于 768px），容器元素采用块级布局，元素宽度为 100%。

2. 动态布局切换：根据分辨率动态更新布局

除了 CSS 媒体查询外，我们还可以使用 JavaScript 来检测窗口的宽度，并根据设备分辨率动态切换布局。

代码示例：

// 获取当前窗口宽度
const screenWidth = window.innerWidth;

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

// 根据窗口宽度动态切换布局
function updateLayout() {
  const screenWidth = window.innerWidth;
  if (screenWidth >= 1024) {
    // 切换到PC端布局
    document.body.classList.add('pc-layout');
    document.body.classList.remove('tablet-layout', 'mobile-layout');
  } else if (screenWidth >= 768) {
    // 切换到平板端布局
    document.body.classList.add('tablet-layout');
    document.body.classList.remove('pc-layout', 'mobile-layout');
  } else {
    // 切换到移动端布局
    document.body.classList.add('mobile-layout');
    document.body.classList.remove('pc-layout', 'tablet-layout');
  }
}

// 初始化布局
updateLayout();

说明：

我们使用 window.innerWidth 获取浏览器窗口的宽度。
通过 resize 事件监听窗口大小的变化，并动态切换页面布局。
根据屏幕宽度，给 body 元素添加相应的类名（如 pc-layout、tablet-layout 或 mobile-layout）来应用不同的样式。

CSS 示例：

/* 默认布局 */
body {
  font-family: Arial, sans-serif;
}

.pc-layout .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tablet-layout .container {
  display: flex;
  flex-direction: column;
}

.mobile-layout .container {
  display: block;
}

3. 结合 Vue 组件实现动态布局切换

在 Vue3 项目中，我们可以使用响应式数据来控制布局的切换。通过监听窗口大小变化并更新组件状态，我们可以实现更动态、灵活的布局。

Vue3 示例：

<template>
  <div :class="layoutClass">
    <div class="container">
      <div class="item">内容 1</div>
      <div class="item">内容 2</div>
      <div class="item">内容 3</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const layoutClass = ref('pc-layout');

// 检测窗口宽度并更新布局
function updateLayout() {
  const screenWidth = window.innerWidth;
  if (screenWidth >= 1024) {
    layoutClass.value = 'pc-layout';
  } else if (screenWidth >= 768) {
    layoutClass.value = 'tablet-layout';
  } else {
    layoutClass.value = 'mobile-layout';
  }
}

onMounted(() => {
  window.addEventListener('resize', updateLayout);
  updateLayout(); // 初始化布局
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateLayout);
});
</script>

<style scoped>
.container {
  width: 100%;
}

.pc-layout .container {
  display: flex;
  flex-direction: row;
}

.tablet-layout .container {
  display: flex;
  flex-direction: column;
}

.mobile-layout .container {
  display: block;
}

.item {
  background-color: #f0f0f0;
  margin: 10px;
  padding: 20px;
  text-align: center;
}
</style>

说明：

我们在 Vue 组件中使用 layoutClass 来动态切换不同的布局类名。
updateLayout 函数根据屏幕宽度设置 layoutClass。
onMounted 生命周期钩子用于在组件挂载时添加 resize 事件监听器，并初始化布局。
onBeforeUnmount 钩子确保在组件销毁时移除事件监听器。

三、分辨率检测与响应：如何实现高效的分辨率检测

为了保证我们的设计在不同设备上能够适配良好，需要通过分辨率检测来动态调整页面的布局。

1. 分辨率检测概述

通过检测设备的屏幕宽度与高度，我们可以动态决定布局方案、字体大小、图片尺寸等。

2. 使用 `window.innerWidth` 和 `window.innerHeight` 获取分辨率

最常见的做法是通过 JavaScript 获取设备的屏幕宽度和高度。在大多数浏览器中，window.innerWidth 和 window.innerHeight 可以准确地返回当前视口的宽度和高度。通过这些数据，我们可以实现自适应布局。

代码示例：

// 获取当前屏幕宽度和高度
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

// 输出当前分辨率
console.log(`当前屏幕宽度：${screenWidth}px, 当前屏幕高度：${screenHeight}px`);

3. 监听窗口尺寸变化：动态调整布局

为了实现动态的布局切换，我们需要监听浏览器的 resize 事件。当用户调整窗口大小时，我们可以重新计算并应用新的布局规则。通过 JavaScript 监听窗口变化，及时响应屏幕尺寸的变化，确保页面在不同的设备上均能正常展示。

代码示例：

// 初始化布局
function updateLayout() {
  const screenWidth = window.innerWidth;

  if (screenWidth >= 1024) {
    document.body.classList.add('pc-layout');
    document.body.classList.remove('tablet-layout', 'mobile-layout');
  } else if (screenWidth >= 768) {
    document.body.classList.add('tablet-layout');
    document.body.classList.remove('pc-layout', 'mobile-layout');
  } else {
    document.body.classList.add('mobile-layout');
    document.body.classList.remove('pc-layout', 'tablet-layout');
  }
}

// 监听页面大小变化
window.addEventListener('resize', updateLayout);

// 页面加载完成后，执行一次初始化
updateLayout();

说明：

我们通过监听 resize 事件，动态更新布局。
根据 window.innerWidth 获取设备宽度，判断设备类型并切换页面样式。
每当窗口尺寸变化时，updateLayout 函数会被调用，确保页面布局实时更新。

4. 在 Vue3 中实现响应式布局切换

在 Vue3 项目中，我们可以利用 ref 和 watch 来监听窗口的尺寸变化，从而实现响应式布局。使用 Vue3 的响应式数据，可以轻松实现与 UI 组件的绑定，当分辨率变化时自动更新页面布局。

Vue3 示例：

<template>
  <div :class="layoutClass">
    <div class="container">
      <div class="item">内容 1</div>
      <div class="item">内容 2</div>
      <div class="item">内容 3</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

// 定义响应式变量，存储当前布局类
const layoutClass = ref('pc-layout');

// 更新布局的函数
function updateLayout() {
  const screenWidth = window.innerWidth;
  if (screenWidth >= 1024) {
    layoutClass.value = 'pc-layout';
  } else if (screenWidth >= 768) {
    layoutClass.value = 'tablet-layout';
  } else {
    layoutClass.value = 'mobile-layout';
  }
}

// 在组件挂载后初始化布局，并监听窗口尺寸变化
onMounted(() => {
  window.addEventListener('resize', updateLayout);
  updateLayout(); // 初始化布局
});

// 在组件销毁时移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateLayout);
});
</script>

<style scoped>
.container {
  width: 100%;
}

.pc-layout .container {
  display: flex;
  flex-direction: row;
}

.tablet-layout .container {
  display: flex;
  flex-direction: column;
}

.mobile-layout .container {
  display: block;
}

.item {
  background-color: #f0f0f0;
  margin: 10px;
  padding: 20px;
  text-align: center;
}
</style>

说明：

在 Vue3 中，我们通过 ref 定义了响应式变量 layoutClass 来存储当前布局类型。
updateLayout 函数根据 window.innerWidth 设置 layoutClass 的值，来动态切换布局。
使用 onMounted 和 onBeforeUnmount 生命周期钩子，确保在组件加载和销毁时正确处理事件监听。

5. 分辨率检测的性能优化

对于高频率触发的事件（如 resize 事件），我们需要考虑性能优化。一个常见的优化方案是使用防抖（debounce）和节流（throttle）技术，以避免每次窗口大小变化时都执行布局更新，从而减轻浏览器性能压力。

防抖优化示例：

// 防抖函数：确保短时间内只执行一次更新
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 使用防抖优化布局更新函数
const optimizedUpdateLayout = debounce(updateLayout, 300);

// 监听页面大小变化时调用优化后的函数
window.addEventListener('resize', optimizedUpdateLayout);

节流优化示例：

// 节流函数：确保在指定时间内只执行一次更新
function throttle(func, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// 使用节流优化布局更新函数
const throttledUpdateLayout = throttle(updateLayout, 200);

// 监听页面大小变化时调用节流后的函数
window.addEventListener('resize', throttledUpdateLayout);

说明：

防抖（debounce）可以确保在用户停止调整窗口大小一定时间后再执行函数，避免函数频繁执行。
节流（throttle）限制函数在指定时间内执行一次，从而减少函数调用频率。

四、布局组件封装：封装可复用的布局组件

1. 布局组件封装的优势

可复用性：通过封装，布局可以在多个页面中复用，避免了重复编写布局相关的代码。
易于维护：修改布局时，只需要修改组件内部的实现，其他页面会自动更新。
解耦性：页面的布局和业务逻辑分离，使得每个部分都能专注于各自的功能，降低耦合度。

2. 封装布局组件的思路

在封装布局组件时，我们需要考虑以下几个方面：

布局结构：常见的布局有水平布局、垂直布局、网格布局等。
响应式布局：为不同设备设计合适的布局方案，例如 PC、平板、手机等。
灵活性与可定制性：允许用户通过传递不同的参数，动态调整布局的形式与样式。

3. 封装常见的布局组件

在这个例子中，我们将封装一个 响应式网格布局组件，它能够根据屏幕大小自动调整列数。同时，提供一些常见的配置项，供页面根据需求传递参数进行灵活定制。

代码示例：响应式网格布局组件

<template>
  <div :class="['grid-container', gridClass]" :style="gridStyle">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue';

// 接收传入的属性
const props = defineProps({
  // 网格列数
  columns: {
    type: Number,
    default: 4, // 默认 4 列
  },
  // 屏幕尺寸变化时的列数配置
  responsive: {
    type: Object,
    default: () => ({
      mobile: 1,  // 小屏设备 1 列
      tablet: 2,  // 中等设备 2 列
      desktop: 4, // 大屏设备 4 列
    }),
  },
  // 间隔配置
  gap: {
    type: String,
    default: '20px', // 默认间距 20px
  },
});

// 计算列数，依据不同屏幕尺寸
const gridClass = computed(() => {
  const width = window.innerWidth;
  if (width <= 768) {
    return `columns-${props.responsive.mobile}`;
  } else if (width <= 1024) {
    return `columns-${props.responsive.tablet}`;
  } else {
    return `columns-${props.responsive.desktop}`;
  }
});

// 计算样式
const gridStyle = computed(() => ({
  gap: props.gap,
}));

// 监听屏幕大小变化，更新布局
window.addEventListener('resize', () => {
  gridClass.value = computeColumns();
});

// 初始化时设置
const computeColumns = () => {
  const width = window.innerWidth;
  if (width <= 768) {
    return `columns-${props.responsive.mobile}`;
  } else if (width <= 1024) {
    return `columns-${props.responsive.tablet}`;
  } else {
    return `columns-${props.responsive.desktop}`;
  }
};

</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 默认 4 列 */
  gap: 20px;
}

.columns-1 {
  grid-template-columns: repeat(1, 1fr);
}

.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
</style>

说明：

columns：通过 columns 属性来控制默认的列数，如果没有传递则默认值为 4 列。
responsive：提供了一个 responsive 对象，可以为不同设备（如移动端、平板和桌面端）定义不同的列数配置。
gap：用于控制网格间隔，可以根据需要调整。
gridClass：通过计算当前屏幕宽度，来动态调整网格列数，确保布局在不同设备下自适应。
resize 事件监听：动态监听窗口尺寸的变化，并相应调整布局。

4. 封装布局组件的扩展性

在开发复杂的智慧工地系统时，布局组件往往不仅限于网格布局，常见的还包括：

Flex 布局：可以方便地控制项目的对齐方式、顺序等。
卡片布局：适用于仪表盘等区域，用户可以拖动、调整大小。
导航栏布局：用于在大屏端显示侧边栏或顶部导航栏。

5. 综合布局组件示例

<template>
  <div class="card-grid-container">
    <div v-for="item in items" :key="item.id" class="card-item">
      <Card :data="item" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Card from './Card.vue';

const items = ref([
  { id: 1, title: '设备状态', description: '实时显示设备的运行状态' },
  { id: 2, title: '环境监测', description: '实时监控工地的环境数据' },
  { id: 3, title: '报警信息', description: '监测到工地中的报警信息' },
]);

</script>

<style scoped>
.card-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动适应卡片数量 */
  gap: 20px;
}

.card-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>

说明：

在上面的示例中，我们将 Card 组件与网格布局结合，实现了一个简单的卡片式布局。
通过 repeat(auto-fill, minmax(300px, 1fr)) 让每个卡片的宽度在屏幕空间足够时自动适配，确保大屏和小屏下的布局自适应。

五、Element Plus + CSS 媒体查询结合技巧：完美实现自适应布局

通过结合 Element Plus 和 CSS 媒体查询，我们可以高效地实现各种屏幕尺寸下的自适应设计。

1. Element Plus 与 CSS 媒体查询的基本概念

Element Plus：是一个基于 Vue 3 的 UI 框架，提供了丰富的 UI 组件，可以帮助我们快速构建响应式的界面。
CSS 媒体查询：媒体查询是一种用于根据设备的不同特性（如屏幕尺寸、分辨率等）应用不同 CSS 样式的方法。在构建响应式布局时，媒体查询是一项非常实用的技术。

2. Element Plus 组件库的响应式设计支持

Element Plus 提供了多种内建的响应式设计支持。<el-row> 和 <el-col> 组件能够根据不同屏幕大小动态调整列的宽度。通过设置不同的 span 属性，能够在不同设备上实现不同的布局。

代码示例：使用 Element Plus 的响应式布局

<template>
  <el-row :gutter="20">
    <el-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="card">设备状态</div>
    </el-col>
    <el-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="card">环境监测</div>
    </el-col>
    <el-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="card">报警信息</div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ElRow, ElCol } from 'element-plus';
</script>

<style scoped>
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  font-size: 16px;
}
</style>

解释：

<el-row> 和 <el-col>：在 Element Plus 中，<el-row> 用于定义行，<el-col> 用于定义列。我们可以通过 span 来设置列宽度，并结合不同的屏幕尺寸设置响应式列数。
xs、sm、md、lg、xl：这些属性表示不同的屏幕尺寸，在相应的设备上会自动调整列宽。例如，xs="24" 表示在超小屏设备上该列宽度占满整个行。

3. CSS 媒体查询：为不同设备设计布局

代码示例：使用 CSS 媒体查询

<template>
  <div class="container">
    <div class="header">智慧工地系统</div>
    <div class="content">
      <div class="card">设备状态</div>
      <div class="card">环境监测</div>
      <div class="card">报警信息</div>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  padding: 20px;
}

.header {
  font-size: 24px;
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

/* CSS 媒体查询 */
@media (max-width: 1024px) {
  .content {
    grid-template-columns: repeat(2, 1fr); /* 中屏设备使用两列 */
  }
}

@media (max-width: 768px) {
  .content {
    grid-template-columns: 1fr; /* 小屏设备使用单列 */
  }
}

@media (max-width: 480px) {
  .header {
    font-size: 18px; /* 小屏设备调整字体大小 */
  }
}
</style>

解释：

grid-template-columns：使用 CSS Grid 布局，在默认情况下为三列（适应大屏设备）。然后，通过媒体查询，根据不同的屏幕尺寸调整列数。
媒体查询：通过 @media 规则，我们根据设备宽度（如 max-width: 1024px 和 max-width: 768px）来改变布局，确保页面在各种设备下能够良好显示。

4. Element Plus 与 CSS 媒体查询结合

代码示例：结合 Element Plus 和 CSS 媒体查询

<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="card">设备状态</div>
      </el-col>
      <el-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="card">环境监测</div>
      </el-col>
      <el-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="card">报警信息</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElRow, ElCol } from 'element-plus';
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

/* 媒体查询优化响应式布局 */
@media (max-width: 1024px) {
  .card {
    font-size: 14px; /* 在较小设备上减小字体 */
  }
}

@media (max-width: 768px) {
  .card {
    font-size: 12px; /* 小设备时进一步减小字体 */
  }
}
</style>