前端 |数据大屏适配方案-京东云开发者社区

## 背景
最近有个大屏的需求，因为在适配问题遇到了坑，所以做了下面的调研。
##大屏设计稿
首先在做大屏的时候要做设计，那么设计稿如何出，感觉这两篇文章讲的很不错，附链接如下：
* [https://mp.weixin.qq.com/s/ni0-XVcPPenFHGvQ4vLSeQ](https://mp.weixin.qq.com/s/ni0-XVcPPenFHGvQ4vLSeQ)
* [https://www.uisdc.com/visual-design-size](https://www.uisdc.com/visual-design-size)

##概念
做大屏的时候第一个了解的概念就是最大输出分辨率，这个因素决定了用多大尺寸的设计，譬如，我们的大屏的分辨率可能是 3840 * 2160，但是连接上电脑以后，最大的输出分辨率是 1920 * 1080 ，那么即使做了 3840 的设计也没有什么意义
* 最大输出分辨率：
[https://baike.baidu.com/item/%E6%9C%80%E5%A4%A7%E5%88%86%E8%BE%A8%E7%8E%87/2701001?fr=aladdin](https://baike.baidu.com/item/%E6%9C%80%E5%A4%A7%E5%88%86%E8%BE%A8%E7%8E%87/2701001?fr=aladdin)
* 常见大屏分辨率

| 屏幕的宽 | 屏幕的高 | 宽高比 |
    |------|------|-----|
    | 1920 | 1080 | 1.777777778|
    | 1680 | 1050 | 1.6|
    | 1600 | 900 | 1.777777778 |
    | 1440|900 |1.6|
    | 1440 | 1050 | 1.371428571 |
    | 1366 | 768| 1.778645833 |
    | 1280| 1024|1.25|
    | 1280| 800| 1.6|
    | 1280 |768 |1.666666667|
    | 1280 | 720|1.777777778|
    | 1024| 768| 1.333333333|
    | 800 | 600 | 1.333333333|
    | 1152 | 720| 1.6|
    | 1344| 840|1.6|
    | 1536| 960|1.6|
    | 1792| 1120 |1.6|
    | 2048 |1208 |1.695364238|

##大屏开发前提条件
如果第一次开发大屏，那么这个步骤对你来说，可以参考下：

* **首先知道显示器（也就是大屏）的分辨率/物理宽高比，最好是分辨率**
知道投屏的电脑连接显示器后输出的最大分辨率，这个非常重要；【原因是比如4224 * 1152的大屏分辨率，我们的最大输出分辨率是 3840，那么我们出的设计稿要按着3840的宽同比例的计算出高度，也就是（3840*1152)/4224, 也就是1047，如果按着4224进行设计的话，因为最大的输出是3840，那么以1个像素点为例，他就会被缩放为 3840/4224 】;
* **确定下用户的特殊需求**，例如：大屏、pc 同展示，大屏可以接受轻微变形等；

## 适配
###投屏电脑和大屏同比例
有两种开发方案，每个都有自己的好处，可以在项目中，根据具体业务选择
* scale 的方式：这种方式的好处是可以pc电脑都兼容，而且比较简单，固定尺寸的大屏也能很好的展示，但是也有不好的地方，比如缩放很小的时候会模糊， 具体的内容为：
    * 以一条边为基础进行缩放，缩放比例为
      ```js
       document.clientWidth / 设计稿的宽度
      ```

* 样式为

```css
        background-image: none;
        background-color: rgb(17, 36, 59);
        transform-origin: left top;
        background-size: 100%;
        ```

### 投屏电脑和大屏不同比列
* 不同比列的时候，可能的时候变形，解决的办法是现在电脑上变形，然后投上去就不变形了，用css3的缩放：比列为

```
    scaleX: clientWidth / 设计图的宽 （这个的宽高为大屏比例的设计图）
    scaleY: clientHeight / 设计图的高
  ```
  ```js
  document.body.style = `transform:scale(${scaleX},${scaleY});transform-origin:left top;`;
  ```

* rem的方式：
    第二种是rem的布局方式, rem是 css3 的引入的一个大小单位。即相对于根元素的 font-size 值的大小。所谓根元素在网页里一般就是 html.

设计稿比例与屏幕比例一致时，我们设置根元素的根元素为100px，即100px = 1rem; 页面上其他元素的尺寸就可以按照 设计稿上的尺寸 / (designWith * 100/clientWith) 写，就可以了

设计稿比例与屏幕比例不相同时，我们根据超出比例的那一边，对rem 对应的fontSize进行缩放。

```js
    /**
   * @description 计算缩放比
   * @param baseW  设计稿宽度，默认3840
   * @param screenRatioByDesign  设计稿宽高比 默认 16 / 9
   * @returns sizeScale
    */
    export const sizeScale = (baseW = 3840, screenRatioByDesign = 16 / 9) => {
      let docEle = document.documentElement;
      // 设备屏幕分辨率的宽高比
      const screenRatio = docEle.clientWidth / docEle.clientHeight;

let sizeScale = 1;
      // 设备宽高比与设计稿宽高比缩放比；
      const screenDesignRatio =
      screenRatio > screenRatioByDesign ? screenRatioByDesign / screenRatio : 1;
      const clientWidth = docEle.clientWidth || window.innerWidth;

sizeScale = screenDesignRatio * (clientWidth / baseW);
      return sizeScale;
    };

export function insertFontRem(
      baseF = 100,
      baseW = 3840,
      screenRatioByDesign = 16 / 9
    ): void {
      const set = () => {
        let fontSize = 100;
        fontSize = sizeScale(baseW, screenRatioByDesign) * baseF;
        const _html: HTMLHtmlElement =
        document.querySelector('html') || document.createElement('html');
        _html.style.fontSize = fontSize.toFixed(3) + 'px';
      };
      set();
      window.addEventListener('resize', set);
    }
  ```
  
  ## 具体案例：

福清大屏，既在大屏上展示又在pc上展示，大屏分辨率是 4224 * 1152 ，投屏电脑输出的最大分辨率是 3840 * 2160，客户接受在大屏上展示时候出现轻微的变形；设计按着1920*1080的进行设计；整体采用scale进行缩放；

铜川大屏，设计稿 3840 * 2160，投屏电脑也是这个分辨率，使用的rem自适应缩放

> 作者: 石丽丽