大屏响应式[纯vw vh]

目录

普通样式

关于字体

关于大屏

图表自适应

图表配置绝对单位自适应

---

普通样式

首先说说最基础的就是样式问题，样式可以这样处理。

1.创建一个scss文件，里面内容如下：

@use "sass:math";

@function vw($px) {
  @return math.div($px, 1920) * 100vw;
}

@function vh($px) {
  @return math.div($px, 1080) * 100vh;
}

一般设计稿给的1920*1080 ，如果不一样可以修改。

注意：如果控制台有提示math.div报错信息，那大概是sass版本太低了，直接下载最新版本即可解决报错问题。

2.使用该文件，可以全局引入或者单独引入。然后可以直接使用了，例如：设计稿里面有一个盒子宽度是200px，高度是300px。代码可以这样写：

.box {
    width:vw(200);
    height:vh(300);
}

关于字体

经过我多次尝试，觉得还是适配宽度比较好。所以字体可以用vw去做。

关于大屏

大屏自适应一个是图表，一个是图表里面配置的绝对单位。

图表自适应

使用vueuse包和监听屏幕宽度。

 <div ref="el" id="chart"></div>

import { useResizeObserver } from "@vueuse/core";

var myChart;// 存放图表的实例
const el = ref(null);

useResizeObserver(el, () => {
  if (myChart) {
    myChart.resize();
  }
});

window.resize = () => {
  if (myChart) {
    myChart.resize();
  }
};

图表配置绝对单位自适应

1.首先定义个方法，这里设计尺寸的1920 ，如果设计稿不是的话，可以直接修改。

/**
 * @function 计算字体大小
 * @param {Number} size 字体大小（单位px）
 * @returns 
 */
export const computFontSize = size => {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return 12;
    return size * clientWidth / 1920;
}

2.使用，例子：

const options = {
    grid:{
         top: computFontSize(15),
         bottom: computFontSize(25),
         left: computFontSize(30),
         right: computFontSize(10),
    }
}