# big-screen-adapter

**Repository Path**: scobiser/big-screen-adapter

## Basic Information

- **Project Name**: big-screen-adapter
- **Description**: 大屏适配的方案vm vh
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2025-04-17
- **Last Updated**: 2025-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大屏适配参考

另外一个方案
- 使用了scale方案
通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放
其实是有一定的问题的：
1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 
2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。

采用了另外的一直方式
- vw vh方案：
实现方式：
按照设计稿的尺寸，将px按比例计算转为vw和vh
优点：1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦



### 依赖安装 
```
npm install
```

### 本地开发
```
npm run serve
```

### 打包上线
```
npm run build
```