前端大屏适配几种方案

1920*1080的设计稿。

方案一：vw（单位）

假设设计稿尺寸为 1920*1080（做之前一定问清楚 ui 设计稿的尺寸）

即： 网页宽度=1920px 网页高度=1080px

我们都知道 网页宽度=100vw 网页宽度=100vh 所以，在 1920px*1080px 的屏幕分辨率下 1920px = 100vw 1080px = 100vh

这样一来，以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，

计算方式如下: vwDiv = (300px / 1920px ) * 100vw vhDiv = (200px / 1080px ) * 100vh

所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高 当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕

使用scss

util.scss

1. // 使用 scss 的 math 函数，https://sass-lang.com/documentation/breaking-changes/slash-div
2. @use "sass:math";
4. // 默认设计稿的宽度
5. $designWidth: 1920;
6. // 默认设计稿的高度
7. $designHeight: 1080;
9. // px 转为 vw 的函数
10. @function vw($px) {
11. @return math.div($px, $designWidth) * 100vw;
12. }
14. // px 转为 vh 的函数
15. @function vh($px) {
16. @return math.div($px, $designHeight) * 100vh;
17. }

 路径配置
只需在vue.config.js里配置一下utils.scss的路径，就可以全局使用了

vue.config.js

1. const path = require("path");
3. function resolve(dir) {
4. return path.join(__dirname, dir);
5. }
7. module.exports = {
8. publicPath: "",
9. configureWebpack: {
10. name: "app name",
11. resolve: {
12. alias: {
13. "@": resolve("src"),
14. },
15. },
16. },
17. css: {
18. // 全局配置 utils.scs，详细配置参考 vue-cli 官网
19. loaderOptions: {
20. sass: {
21. prependData: `@import "@/styles/utils.scss";`,
22. },
23. },
24. },
25. };

如果是vite.config.ts得这样配置

1. return {
2. resolve: {
3. // Vite路径别名配置
4. alias: {
5. "@": pathSrc,
6. },
7. },
8. css: {
9. // CSS 预处理器
10. preprocessorOptions: {
11. //define global scss variable
12. scss: {
13. javascriptEnabled: true,
14. additionalData: `
15. @use "@/styles/variables.scss" as *;
16. // 必须这样配置才能生效！
17. @use "@/styles/until.scss" as *;
18. `,
19. },
20. },
21. },
22. };

  在.vue文件中直接使用

1. <template>
2. <div class="box">
3. div>
4. template>
6. <script>
7. export default{
8. name: "Box",
9. }
10. script>
12. <style lang="scss" scoped="scoped">
13. /*
14. 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位
15. */
16. .box{
17. width: vw(300);
18. height: vh(100);
19. font-size: vh(16);
20. background-color: black;
21. margin-left: vw(10);
22. margin-top: vh(10);
23. border: vh(2) solid red;
24. }
25. style>

定义 js 样式处理函数

1. // 定义设计稿的宽高
2. const designWidth = 1920;
3. const designHeight = 1080;
5. // px转vw
6. export const px2vw = (_px) => {
7. return (_px * 100.0) / designWidth + 'vw';
8. };
10. export const px2vh = (_px) => {
11. return (_px * 100.0) / designHeight + 'vh';
12. };
14. export const px2font = (_px) => {
15. return (_px * 100.0) / designWidth + 'vw';
16. };

屏幕变化后，图表自动调整

 这种使用方式有个弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整

为了解决这个问题，你需要在各个图表中监听页面尺寸变化，重新调整图表，在 vue 项目中，也可以借助element-resize-detector，最好封装个 resize 的指令，在各图表中就只要使用该指令就可以了，毕竟作为程序员，能偷懒就偷懒

1.安装 element-resize-detector

npm install element-resize-detector --save

2.引入工具包在组件中使用或者在单独的 js 中使用

import resizeDetector from 'element-resize-detector'

3.封装 directive

1. // directive.js
2. import * as ECharts from "echarts";
3. import elementResizeDetectorMaker from "element-resize-detector";
4. import Vue from "vue";
5. const HANDLER = "_vue_resize_handler";
6. function bind(el, binding) {
7. el[HANDLER] = binding.value
8. ? binding.value
9. : () => {
10. let chart = ECharts.getInstanceByDom(el);
11. if (!chart) {
12. return;
13. }
14. chart.resize();
15. };
16. // 监听绑定的div大小变化，更新 echarts 大小
17. elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
18. }
19. function unbind(el) {
20. // window.removeEventListener("resize", el[HANDLER]);
21. elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
22. delete el[HANDLER];
23. }
24. // 自定义指令：v-chart-resize 示例：v-chart-resize="fn"
25. Vue.directive("chart-resize", { bind, unbind });

4.main.js中引入

import '@/directive/directive'; 

5.html 代码

1. <template>
2. <div class="linechart">
3. <div ref="chart" v-chart-resize class="chart">div>
4. div>
5. template>

 这里要注意的是，图表中如果需要 tab 切换动态更新图表数据，在更新数据时一定不要用 echarts 的 dispose 方法先将图表移除，再重新绘制，因为 resize 指令中挂载到的图表实例还是旧的，就监听不到新的 chart 元素的 resize 了，更新数据只需要用 chart 的 setOption 方法重新设置配置项即可。

图表字体、间距、位移等尺寸自适应

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

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