Appearance
认识大屏
在开发网页时，我适配最多的屏幕尺寸是：
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）
javascript
(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 的设计稿愉快开发，此时的页面已经是响应式，并且宽高比不变。
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 {
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: 0.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 的设计稿愉快开发，此时的页面已经是响应式，并宽高比不变。
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 {
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 函数来缩放网页，这里我们将使用两种方案来实现：
方案一：直接根据宽度的比率进行缩放。（宽度比率=网页当前宽 / 设计稿宽）
方案二：动态计算网页宽高比，决定是是否按照宽度的比率进行缩放。
方案一
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 {
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>方案二
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 形变动画
- 少用渐变和高斯模糊、当不需要动画时，及时关闭动画