大屏项目适配做法

基础知识点

1.px和vh分别代表什么

px：px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

vh和vh：vm、vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域，换句话说是你的网页浏览器不包括工具栏和按钮的部分。（vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%），vh：视窗高度的百分比）

2.获取窗口方法

window.innerWidth是JavaScript中的一个属性，它返回浏览器窗口的内部宽度，即不包括滚动条和边框的宽度。

document.documentElement.clientWidth获取当前浏览器窗口的宽度，单位为像素。

document.body.clientWidth用于获取当前页面的可视区域宽度（不包括滚动条）。具体来说，它返回的是 body 元素的 clientWidth 属性值。

import elementResizeDetectorMaker from 'element-resize-detector'
// 定义设计稿的宽高
const designWidth = 1920;
const designHeight = 1080;

// px转vw
export const px2vw = (_px) => {
  return (_px * 100.0) / designWidth + 'vw';
};

export const px2vh = (_px) => {
  return (_px * 100.0) / designHeight + 'vh';
};

export const px2font = (_px) => {
  return (_px * 100.0) / designWidth + 'vw';
};


// 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));
}