技巧-可视化大屏适配思考如何实现一个大屏？大屏和一般的pc适配有什么不同？带着这两个问题进行了思考，并查阅了一些资料，下

如何实现一个大屏？大屏和一般的pc适配有什么不同？带着这两个问题进行了思考，并查阅了一些资料，下面是我的得到的关于实现大屏的一些想法。

1. 适配与否

第一个核心的就是要不要去适配，怎么去做这个适配，需要怎样的效果。

适配

在电脑上开发，一般是 1920 x 1080的，在电脑上是和设计稿一样的，而办公室或者公共区域的一些大屏，则可以将页面放大，按照宽高比，将长边完全显示出来，这时如果大屏的高度较大，则会在上下边留白。
不适配

在一些办公室的小电脑里，如果不伸缩，不做适配，那也是可以的，当页面超过屏幕时，则出现滚动条。

2. 适配方案

方案	实现方式	优点	缺点
`vw`、`vh`	按照设计稿的尺寸，将 `px`按比例计算转换成 `vw`和`vh`	1. 可以动态计算算图表的宽高、字体大小等，灵活性比较高。2. 当屏幕比例和UI比例不一致时，不会出现两边留白的情况。	需要编写公共转换函数，为每个图表都单独制定字体、间距、位移的适配，比较麻烦
`scale`	通过 `scale` 属性，根据屏幕大小，对图表进行整体的等比缩放	1. 代码量少，适配简单。2. 一次处理后不需要在各个图表中再去单独适配。	1.当大屏与UI稿的比例不一样时，会出现两边留白情况。2. 当缩放比例过大时，字体和图片会有一点失真，事件热区会偏移。
`rem`+ `vw vh`	1. 获得`rem`的基准值。2. 动态的计算`html根元素的font-size`。3.图表中通过`vw vh`动态计算字体、间距、位移等。	布局的自适应代码量少，适配简单。	1.当大屏与UI稿的比例不一样时，会出现两边留白情况。2. 图表需要单个做字体、间距、位移等。

常用的就是第二种，说一下实现原理。

const setContentSize = () => {
  const w = 1920; //设计稿尺寸
  const h = 960;

  const screenW = window.screen.width; //大屏 直接获取屏幕宽度
  const screenH = window.screen.height;

  // 计算大屏与设计稿的比例
  const scaleW = screenW / w;
  const scaleH = screenH / h;

  //判断宽高比
  //设计稿比例大，则偏`扁`，为保证能全部展示，所以取 `宽度比例`
  const scale = w / h > screenW / screenH ? scaleW : scaleH;

  document.querySelector(
    ".pic"
  ).style.transform = `translate(-50%,-50%) scale(${scale}) `; //定位居中
};