Document

--- theme: devui-blue highlight: atom-one-dark --- ## 一、认识大屏设备 ### 1.1 拼接屏 - 拼接屏：顾名思义就是很多屏幕按照一定拼接方式拼接而成。 - 其实可以理解成是由很多电视（显示屏）拼接而成。 - 常见的使用场景有指挥大厅、展厅、展会等等。 - 拼接方式取决于使用场景的需求，如下例子： - 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）

### 1.2 LED屏 - LED 也是现在大屏中常用的硬件，它是**由若干单体屏幕模块组成的，它的像素点计算及拼接方式与拼接屏有很大区别**。 - LED 可以看成是矩形点阵，具体拼接方式也会根据现场实际情况有所不同，拼接方式的不同直接影响到设计的尺寸规则。 - LED 屏有很多规格，各规格计算方法相同。 - 比如，我们用单体为 500 * 500 的作为标准计算，每个单体模块像素点横竖都为 128px - 如下图，横向 12 块竖向 6 块，横向像素为 128*12=1536px，竖向 128*6=768px。可以使用横竖总像素去设计。 - 最终算出的屏幕尺寸：1536px * 768px

## 二、设计稿尺寸设计 ### 2.1 拼接屏 - 大多数屏幕分辨率是 `1920*1080`。当然也会有一些大屏，比如6*3的拼接屏，横向分辨率为 `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倍图 ### 2.2 LED屏 - 此处规则和上面的拼接屏一样，如果**超过 4K 像素时可以等比缩放，建议尽量保持在 4k 及以下**。 - 比如 - `1536px * 768px`，设计稿尺寸： 1536px * 768px 。 - `4608 * 3072`，设计稿尺寸： 4608 * 3072 。 - `9216 * 6144`，设计稿尺寸： - 比如：4608 * 3072，需要出 1倍图和 2倍图 ### 2.3 移动端大屏 - 对于移动端的大屏展示，基本按照实际尺寸设计即可，比如： - `750px * Auto`，设计搞尺寸： 750px * Auto 。 ### 2.4 设计稿总结 - 大屏设计稿尺寸的总结： - 设计尺寸建议按照输出分辨率设计（重点） - 拼接后像素在 4k 左右直接按照总和设计就行 - 总和设计建议不要超过 4k，可以按比例缩小设计搞（非固定，超过也是可以，只是强烈建议） - 建议定设计搞尺寸前，先了解硬件及信号输入输出，确定设计搞的尺寸 - **特殊尺寸，需到现场调试最佳设计稿的尺寸** - 大屏适配方案的总结： - **特殊尺寸不要考虑适配电脑屏幕又适配拼接屏**，因为完全没有必要，也不可能一稿既适配电脑也适配各种尺寸大屏 - 这种情况应该优先考虑目标屏幕的适配，**要针对性设计，而在小屏根据等比例缩放显示，这才是最佳的解决方法** ## 三、大屏适配方案 ### 3.1 适配方案分析 - 方案一：百分比设置 - 方案二：rem单位 + 动态 html 的 font-size - 方案三：vw单位 - 方案四：flex 弹性布局 - 番感悟：scale等比例缩放(推荐) ### 3.2 rem单位 + 动态 html 的 font-size - 动态设置HTML根字体大小和 body 字体大小（lib_flexible.js） - **将设计稿的宽（1920）平均分成 24 等份，每一份为 80px** - HTML字体大小就设置为 80 px，即`1rem = 80px`， `24rem = 1920px` - body字体大小设置为 16px - 安装 cssrem 插件， root font size 设置为 80px。这个是px单位转rem的参考值 - px 转 rem方式：手动、less/scss函数、cssrem插件、webpack插件、Vite插件 - 接着就可以按照 `1920px * 1080px` 的设计稿愉快开发，此时的页面已经是响应式，并且宽高比不变 - flexible.js ```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); ``` - 使用 ```html Document

``` ### 3.2 vw单位 - 屏幕的宽默认为 100vw，那么`100vw = 1920px`， `1vw = 19.2px` - 安装 `cssrem` 插件， body的宽高（1920px * 1080px）直接把px单位转vw单位 - px 转 vw 方式：手动、less/scss函数、cssrem插件、webpack插件、Vite插件 - 接着就可以按照 `1920px * 1080px` 的设计稿愉快开发，此时的页面已经是响应式，并宽高比不变 ### 3.3 scale缩放 - 方案一：**直接根据宽度的比率进行缩放**。（`宽度比率 = 网页当前宽 / 设计稿宽`） - 这种方案对于超宽屏（比如：`7680 * 2160`）会出现竖向滚动条 - 方案二：**动态计算网页宽高比，决定是是否按照宽度的比率进行缩放** - 这种方案对于超宽屏（比如：`7680 * 2160`），按照高度进行缩放，然后居中显示 - **注意：缩放需要平移坐标原点到左上角 `transform-origin: left top;`** ```html Document

``` ### 3.4 大屏适配方案的对比 - 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形变动画** - **少用渐变和高斯模糊、当不需要动画时，及时关闭动画**