一、认识大屏设备
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 块，横向像素为 12812=1536px，竖向 1286=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
(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); -
使用
<!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{ /* 使用rem */ 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>
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;<!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>
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形变动画
-
少用渐变和高斯模糊、当不需要动画时，及时关闭动画
-
