前端开发大屏适配几种方案，零基础入门到精通，收藏这篇就够了

原创于 2025-12-15 09:50:12 发布 · 366 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#rust #开发语言 #后端

计算机同时被 3 个专栏收录

1879 篇文章

订阅专栏

程序员

1878 篇文章

订阅专栏

前端

53 篇文章

订阅专栏

方案一：vw（单位）

假设设计稿尺寸为 1920*1080，直接使用 vw 单位，屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px 。

新建px2vw.scss

/ 使用 scss 的 math 函数
@use "sass:math";

// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;

// px 转为 vw 的函数
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}

// px 转为 vh 的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}

配置

vue.config.js配置

vue.config.js文件

module.exports = {
  ...,//其他设置
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/px2vw.scss";`,
      },
    },
  },
};

vite.config.ts配置

return {
    ...,//其他配置
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: `@use "@/styles/px2vw.scss" as *;`,
        },
      },
    },
  };

在组件中使用

<template>
    <div class="box">      
    </div>
</template>

<script>
export default{
    name: "Box",
}
</script>

<style lang="scss" scoped="scoped">
/* 
 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位     
 */
.box{
    width: vw(300);
    height: vh(100);
    font-size: vh(16);
    background-color: black;
    margin-left: vw(10);
    margin-top: vh(10);
    border: vh(2) solid red;
}
</style>

图表自适应

echarts 的字体大小只支持具体数值（像素），不能用百分比或者 vw 等尺寸，一般字体不会去做自适应，当宽高比跟 ui 稿比例出入太大时，会出现文字跟图表重叠的情况

这里我们就需要封装一个工具函数，来处理图表中文字自适应了👇

把这个函数写在一个单独的工具文件chartsUtil.js里面，在需要的时候调用

其原理是计算出当前屏幕宽度和默认设计宽度的比值，将原始的尺寸乘以该值

另外，其它 echarts 的配置项，比如间距、定位、边距也可以用该函数

1.chartsUtil.js 工具函数


// Echarts图表字体、间距自适应
export const fitChartSize = (size,defalteWidth = 1920) => {
  let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  if (!clientWidth) return size;
  let scale = (clientWidth / defalteWidth);
  return Number((size*scale).toFixed(3));
}

2.将工具函数挂载到vue


import {fitChartSize} from '@src/utils/chartsUtil.js'
Vue.prototype.fitChartFont = fitChartSize;

3.组件中使用

<template>
  <div class="charts-wrapper" ref="chart" v-chart-resize></div>
</template>

<script>
export default {
  name: "chart",
  data() {
    return {
      option: null,
    };
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = this.$echarts.init(this.$refs.chart);
      const option = {
        ...,//其他设置
        grid: {
          left: this.fitChartSize(10),
          right: this.fitChartSize(20),
          top: this.fitChartSize(20),
          bottom: this.fitChartSize(10),
          containLabel: true,
        },
       }
      myChart.setOption(option, true);
    },
  }
};
</script>

<style lang="scss" scoped>
.charts-wrapper {
  width: 100%;
  height: 100%;
}
</style>

方案二：scale（缩放）强烈推荐

我们整个大屏的尺寸设置和设计图一样，只是通过css的scale放大缩小属性，来控制实际展示的大小。

通过监听浏览器窗口的大小，来改变scale的比例，从而实现数据大屏适配。（百度、网易等大数据适配的解决方案均是这个）

实现步骤

获取数据大屏展示内容区域的 DOM 元素。
style.transform：这是访问元素的 transform 样式属性。transform 是一个 CSS 属性，用于对元素进行变换，例如旋转、缩放、平移等。
scale(${getScale()})：这部分代码中，getScale() 函数返回一个缩放比例，这个比例会应用在 scale() 函数中。这样，页面元素会按照指定的比例进行缩放。缩放比例是根据窗口大小和设计稿大小计算的，以确保内容适应不同的屏幕尺寸。
translate(-50%, -50%)：这部分代码中，translate() 函数用于对元素进行平移。在这里，它将元素的中心点平移到屏幕的中心。-50% 表示水平和垂直方向都要将元素平移到其自身宽度和高度的一半的位置，从而实现居中效果。
transform-origin 是 CSS 属性，用于指定元素的变换（比如旋转、缩放、平移等）的原点位置，即元素围绕哪个点进行变换操作。在你提供的样式中，transform-origin 设置为 left top，这意味着元素的变换原点位于元素的左上角

缺点

因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
当缩放比例过大时候，字体会有一点点模糊，就一点点
当缩放比例过大时候，事件热区会偏移。

方案三：插件v-scale-screen

它其实也是通过 scale 进行等比例计算放大和缩小的，和方案二的原理是一样的，还可以通过api调整样式，源码地址和对应的API

vue2方案

1.使用v-scale-screen@1.0.0版本


npm install v-scale-screen@1.0.0 -save
# or
yarn add v-scale-screen

2.main中引入并使用

// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

3.组件中使用


<template>
<v-scale-screen width="1920" height="1080" :boxStyle="boxStyle">
  <div>
    ...
  </div>
</v-scale-screen>
<template>
<script>
export default {
  data() {
    return {
      boxStyle: {
        backgroundColor: 'green'
      },
    }
}
</script>

vue3方案

1.使用v-scale-screen@2.0.0版本


npm install v-scale-screen@2.0.0 -save

2.组件中使用

<template>
<v-scale-screen width="1920" height="1080">
  <div>
    ...
  </div>
</v-scale-screen>
</template>
<script setup>
import VScaleScreen from 'v-scale-screen'
</script>

2025开年，AI技术打得火热，正在改变前端人的职业命运：