前端开发大屏适配几种方案

方案一：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 稿比例出入太大时，会出现文字跟图表重叠的情况

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