认识大屏

在开发网页时，我适配最多的屏幕尺寸是：

PC端电脑：1920px * 1080px （当然也有少部分电脑是支持输出4k屏， 比如：小米笔记本等）

移动设备： 750px * auto

那什么是大屏设备

在我们的生活中，经常会见到一些比较大的屏幕，比如：指挥大厅、展厅、展会中的大屏。这些设备就可以称之为大屏设备，

当然1920 * 1080 和 3840 * 2160（4k 屏 ）也可以说是属于大屏。

大屏的应用场景

通常用在数据可视化，借助于图形化手段，清晰有效地传达与沟通信息

比如用在：零售、物流、电力、水利、环保、交通、医疗等领域。

大屏的硬件设备的分类：

拼接屏、LED屏、投影等。

大屏设备-拼接屏

拼接屏

顾名思义就是很多屏幕按照一定拼接方式拼接而成。

• 其实可以理解成是由很多电视（显示屏）拼接而成。
• 常见的使用场景有指挥大厅、展厅、展会等等。

拼接方式取决于使用场景的需求，如下例子：

• 1920px * 1080px，即 1 * 1 个 显示屏（16 : 9）
• 3840 * 2160（4k 屏 ），即 2 * 2 个显示屏（16 : 9）
• 5760 * 3240，即 3 * 3 个显示屏（16 : 9）
• 7680 * 3240，即 4 * 3 个显示屏（64 : 27）
• 9600 * 3240，即 5 * 3 个显示屏（80 : 27）

大屏设备- LED屏

LED屏

LED 也是现在大屏中常用的硬件，它是由若干单体屏幕模块组成的，它的像素点计算及拼接方式与拼接屏有很大区别。

LED 可以看成是矩形点阵，具体拼接方式也会根据现场实际情况有所不同，拼接方式的不同直接影响到设计的尺寸规则。

LED 屏有很多规格，各规格计算方法相同。

• 比如，我们用单体为 500 * 500 的作为标准计算，每个单体模块像素点横竖都为 128px
• 如右图，横向 12 块竖向 6 块，横向像素为 128 * 12=1536px，竖向 128 * 6=768px。可以使用横竖总像素去设计。
• 最终算出的屏幕尺寸：1536px * 768px

定设计稿尺寸 -拼接屏

拼接屏

大多数屏幕分辨率是 19201080。当然也会有一些大屏，比如63的拼接屏，横向分辨率为 6*1920=11520px。竖向分辨率为

3*1080=3240px。设计可以按照横竖计算后的总和（11520px * 3240px）作为设计尺寸。

这种尺寸过大的就不太适合按原尺寸设计，那怎么判断什么时候可以按照总和设计，什么时候最好不要按照总和设计。这有一个关键

的节点 4K，超过 4K 后现有硬件会产生很多问题，例如：卡顿，GPU 压力过大，高负荷运行等等。

正常设计建议最好是保持在 4K 内，由于硬件问题，所以现在大家采用的都是输出 4K 及以下，既保证流畅度又能在视觉上清晰阅读。

所以设计时也要保持同样的规则。保持大屏的比例等比缩放即可。

注：最好是按照硬件的输出分辨率设计（关键），因为按照输出分辨率设计，一定不会出错。

比如

• 1920px * 1080px（1*1），设计搞尺寸 ：1920px * 1080px
• 3840 * 2160（2*2 4k 屏 ），设计搞尺寸 ： 3840 * 2160
• 5760 * 3240（3*3），设计搞尺寸 ： 5760 * 3240
• 7680 * 3240（4*3），设计搞尺寸 ： （ 3840 * 1620 需要出 1倍图 和 2倍图， 7680 * 3240 ）
• 9600 * 3240（5*3），设计搞尺寸 ： 比如：4800 * 1620，需要出 1倍图 和 2倍图

定设计稿尺寸 -LED屏

LED屏

LED 大屏是由若干单体屏幕模块组成的，LED 屏有很多规格，但是规格计算方法相同。

比如：我们用单体为 500 * 500 的作为标准计算，每个单体模块像素点横竖都为 128px。

如图横向 12 块竖向 6 块，横向像素为 128 * 12=1536px，竖向 128 * 6=768px。可以使用横竖总像素去设计。

此处规则和之前的拼接屏一样，如果超过 4K 像素时可以等比缩放，建议尽量保持在 4k 及以下。

比如

• 1536px * 768px，设计搞尺寸 ： 1536px * 768px 。
• 4608 * 3072，设计搞尺寸 ： 4608 * 3072 。
• 9216 * 6144，设计搞尺寸 ：
  • 比如：4608 * 3072，需要出 1倍图 和 2倍图

设计稿尺寸-移动端大屏

对于移动端的大屏展示，基本按照实际尺寸设计即可，比如：

750px * Auto，设计搞尺寸 ： 750px * Auto 。

大屏设计稿尺寸的总结：

• 设计尺寸建议按照输出分辨率设计（重点）

• 拼接后像素在 4k 左右直接按照总和设计就行

• 总和设计建议不要超过 4k，可以按比例缩小设计搞（非固定，超过也是可以，只是强烈建议）

• 建议定设计搞尺寸前，先了解硬件及信号输入输出，确定设计搞的尺寸。

• 特殊尺寸，需到现场调试最佳设计搞的尺寸。

大屏适配方案的总结：

特殊尺寸不要考虑适配电脑屏幕又适配拼接屏，因为完全没有必要，也不可能一稿既适配电脑也适配各种尺寸大屏。

这种情况应该优先考虑目标屏幕的适配，要针对性设计，而在小屏根据等比例缩放显示，这才是最佳的解决方法。

大屏适配方案

在学习大屏适配方案之前，我们现在回顾一下移动端的适配方案有哪些？

方案一：百分比设置；

• 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；
• 所以百分比在移动端适配中使用是非常少的；

方案二：rem单位 + 动态设置 html 的 font-size；

方案三：vw单位（推荐）；

方案四：flex的弹性布局（推荐） ；

大屏的幕尺寸通常也是非常多的，很多时候我们是希望页面在不同的屏幕尺寸上显示不同的尺寸，那大屏的适配方案有哪些？

方案一：百分比设置；

方案二：rem 单位 + 动态设置 html 的 font-size；

方案三：vw 单位；

方案四：flex 弹性布局；

方案五：scale 等比例缩放（推荐）

探究大屏适配方案

等比例缩放有的就会有滚动条，要么就是高度完全展示，宽度适配中间部分。

新建 大屏设备

在讲解大屏适配之前，我们先来创建几个大屏设备，这样可以方便我们学习和测试。

在chrome浏览器中，打开 DevTools 页面

在选择设备下拉栏中，点击最后一个选项 Edit

然后在Emulated Devices中点击 Add custom device ....

最后在Device面板中输入设备信息，并点击 Add 按钮完成设备的新建。

这里分别新建：1920*1080 、 3840 * 2160 、 7680 * 2160

大屏适配方案1 – rem + font-size

动态设置HTML根字体大小 和 body 字体大小（lib_flexible.js）

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      // body 字体大小默认为 16px
      document.body.style.fontSize = 16 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // 这里默认平均分成 10 等分(适用移动端)
  // set 1rem = viewWidth / 24 ；（使用pc端）
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;  // 1920 / 24 = 80 
    docEl.style.fontSize = rem + "px"; // 设置 html字体的大小 80px
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

将设计稿的宽（1920）平均分成 24 等份， 每一份为 80px。

HTML字体大小就设置为 80 px，即1rem = 80px， 24rem = 1920px

body字体大小设置为 16px。

安装 cssrem 插件， root font size 设置为 80px。这个是px单位转rem的参考值

安装插件

然后点击小齿轮，扩展设置

进行配置，改为80

• px 转 rem方式：手动、less/scss函数、cssrem插件、webpack插件、Vite插件

接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并且宽高比不变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      width: 24rem;
      height: 13.5rem;
      box-sizing: border-box;
      border: 3px solid red;
    }

    ul{
      width: 100%;
      height: 100%;
      list-style: none;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    li{
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 2px solid green;
      font-size: .375rem;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script src="./lib_flexible.js"></script>
</body>
</html>

大屏适配方案2 - vw

直接使用vw单位。

屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px 。

安装 cssrem 插件， body的宽高（1920px * 1080px）直接把px单位转vw单位

• px 转 vw 方式：手动、less/scss函数、cssrem插件、webpack插件、Vite插件

接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并宽高比不变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      width: 100vw;
      height: 56.25vw;
      box-sizing: border-box;
      border: 3px solid red;
    }

    ul{
      width: 100%;
      height: 100%;
      list-style: none;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    li{
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 2px solid green;
      font-size: 1.5625vw;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
</html>

大屏适配方案3（推荐） - scale

使用CSS3中的scale函数来缩放网页，这里我们将使用两种方案来实现：

方案一：直接根据宽度的比率进行缩放。（宽度比率=网页当前宽 / 设计稿宽）

方案二：动态计算网页宽高比，决定是是否按照宽度的比率进行缩放。

方案一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      width: 1920px;
      height: 1080px;
      box-sizing: border-box;
      border: 3px solid red;

      /* 指定缩放的原点在左上角 */
      transform-origin: left top;
    }

    ul{
      width: 100%;
      height: 100%;
      list-style: none;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    li{
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 2px solid green;
      font-size: 30px;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>

    // 设计稿:  1920 * 1080
    // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)

    // 1.设计稿的尺寸
    let targetX = 1920
    // let targetY = 1080
    // let targetRatio = 16 / 9 // 宽高比率

    // 2.拿到当前设备(浏览器)的宽度
    let currentX = document.documentElement.clientWidth || document.body.clientWidth
    //  1920 * 1080  -> 3840 * 2160

    // 3.计算缩放比例
    let scaleRatio = currentX / targetX; // 参照宽度进行缩放

    // 4.开始缩放网页
    document.body.style = `transform: scale(${scaleRatio})`


      
  </script>
</body>
</html>

方案二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      position: relative;
      width: 1920px;
      height: 1080px;
      box-sizing: border-box;
      border: 3px solid red;

      /* 指定缩放的原点在左上角 */
      transform-origin: left top;
    }

    ul{
      width: 100%;
      height: 100%;
      list-style: none;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    li{
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 2px solid green;
      font-size: 30px;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>

    // 设计稿:  1920 * 1080
    // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)

    // 1.设计稿的尺寸
    let targetX = 1920
    let targetY = 1080
    let targetRatio = 16 / 9 // 宽高比率

    // 2.拿到当前设备(浏览器)的宽度
    let currentX = document.documentElement.clientWidth || document.body.clientWidth
    let currentY = document.documentElement.clientHeight || document.body.clientHeight
    //  1920 * 1080  -> 3840 * 2160

    // 3.计算缩放比例
    let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
    let currentRatio = currentX / currentY // 宽高比率

    // 超宽屏
    if(currentRatio > targetRatio) {
      scaleRatio = currentY / targetY // 参照高度进行缩放
      document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`
    } else {
      // 4.开始缩放网页
      document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`
    }
      
  </script>
</body>
</html>

三种适配方案的对比

vw相比于rem的优势：

• 优势一：不需要去计算html的font-size大小，不需要给html设置font-size，也不需要设置body的font-size，防止继承；
• 优势二：因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱；
• 优势三：vw相比于rem更加语义化，1vw是1/100的viewport大小（即将屏幕分成100份）; 并且具备 rem 之前所有的优点；

vw 和 rem 存在问题

• 如果使用rem或vw单位时，在JS中添加样式时，单位需要手动设置rem或vw。
• 第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式。
• 当大屏比例更大时，有些字体还需要相应的调整字号。

scale相比vw和rem的优势

• 优势一：相比于vw 和 rem，使用起来更加简单，不需要对单位进行转换。
• 优势二：因为不需要对单位进行转换，在使用第三方库时，不需要考虑单位转换问题。
• 优势三：由于浏览器的字体默认最小是不能小于12px，导致rem或vw无法设置小于12px的字体，缩放没有这个问题。

大屏开发 注意事项

字体大小设置问题（非scale方案需要考虑）

• 如果使用rem或vw单位时，在JS中添加样式时，单位需要手动设置rem或vw。
• 第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式。
• 当大屏比例更大时，有些字体还需要相应的调整字号。

图片模糊问题

• 切图时切1倍图、2倍图，大屏用大图，小屏用小图。
• 建议都使用SVG矢量图，保证放大缩小不会失真。

Echarts 渲染引擎的选择

• 使用SVG渲染引擎，SVG图扩展性更好

动画卡顿优化

• 创建新的渲染层、启用GPU加速、善用CSS3形变动画
• 少用渐变和高斯模糊、当不需要动画时，及时关闭动画