数据可视化--大屏适配(一)
2022-12-11 本文已影响0人
coderhzc
一.大屏的基本认识:
1. PC端电脑：1920px * 1080px （当然也有少部分电脑是支持输出4k屏， 比如：小米笔记本等）
2. 移动设备： 750px * auto
3. 大屏设备是啥?
-- 在我们的生活中，经常会见到一些比较大的屏幕，比如：指挥大厅、展厅、展会中的大屏。这些设备就可以称之为大屏设备，
当然1920*1080 和 3840*2160（4k 屏 ）也可以说是属于大屏。
4. 大屏的应用场景
-- 通常用在数据可视化，借助于图形化手段，清晰有效地传达与沟通信息
-- 比如用在：零售、物流、电力、水利、环保、交通、医疗等领域。
5. 大屏的硬件设备的分类：
-- 拼接屏、LED屏、投影等。
6. 大屏设备-拼接屏
-- 拼接屏 顾名思义就是很多屏幕按照一定拼接方式拼接而成。
-- 其实可以理解成是由很多电视（显示屏）拼接而成。
-- 常见的使用场景有指挥大厅、展厅、展会等等
7. 拼接方式取决于使用场景的需求，如下例子：
-- 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）
8. 大屏设备- LED屏
LED屏
-- LED 也是现在大屏中常用的硬件，它是由若干单体屏幕模块组成的，它的像素点计算及拼接方式与拼接屏有很大区别。
-- LED 可以看成是矩形点阵，具体拼接方式也会根据现场实际情况有所不同，拼接方式的不同直接影响到设计的尺寸规则。
-- LED 屏有很多规格，各规格计算方法相同。
-- ✓ 比如，我们用单体为 500 * 500 的作为标准计算，每个单体模块像素点横竖都为 128px
-- ✓ 如右图，横向 12 块竖向 6 块，横向像素为 128*12=1536px，竖向 128*6=768px。可以使用横竖总像素去设计。
-- ✓ 最终算出的屏幕尺寸：1536px * 768px
9. 定设计稿尺寸 -拼接屏
拼接屏
-- 大多数屏幕分辨率是 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倍图
10. 定设计稿尺寸 -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倍图
11. 设计稿尺寸-移动端大屏
-- 对于移动端的大屏展示，基本按照实际尺寸设计即可，比如：
-- 750px * Auto，设计搞尺寸 ： 750px * Auto 。
12. 大屏设计稿尺寸的总结：
-- 设计尺寸建议按照输出分辨率设计（重点）
-- 拼接后像素在 4k 左右直接按照总和设计就行
-- 总和设计建议不要超过 4k，可以按比例缩小设计搞（非固定，超过也是可以，只是强烈建议）
-- 建议定设计搞尺寸前，先了解硬件及信号输入输出，确定设计搞的尺寸。
-- 特殊尺寸，需到现场调试最佳设计搞的尺寸。
13.大屏适配方案的总结：
-- 特殊尺寸不要考虑适配电脑屏幕又适配拼接屏，因为完全没有必要，也不可能一稿既适配电脑也适配各种尺寸大屏。
-- 这种情况应该优先考虑目标屏幕的适配，要针对性设计，而在小屏根据等比例缩放显示，这才是最佳的解决方法。
14. 大屏适配方案
在学习大屏适配方案之前，我们现在回顾一下移动端的适配方案有哪些？
-- 方案一：百分比设置；
-- ✓ 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；
-- ✓ 所以百分比在移动端适配中使用是非常少的；
-- 方案二：rem单位 + 动态设置 html 的 font-size；
-- 方案三：vw单位（推荐）；
-- 方案四：flex的弹性布局（推荐） ；
◼ 大屏的幕尺寸通常也是非常多的，很多时候我们是希望页面在不同的屏幕尺寸上显示不同的尺寸，那大屏的适配方案有哪些？
-- 方案一：百分比设置；
-- 方案二：rem 单位 + 动态设置 html 的 font-size；
-- 方案三：vw 单位；
-- 方案四：flex 弹性布局；
-- 方案五：scale 等比例缩放（推荐）
二. 新建 大屏设备
image.png
三. 大屏适配方案1 – rem + font-size
image.png
四. 大屏适配方案2 - vw
image.png
五. 大屏适配方案3（推荐） - scale
image.png
六. 三种适配方案的对比
image.png
七. 大屏开发 注意事项
image.png
八. 大屏项目适配
image.png
九. 在项目中新建一个 flexbel.js 关于适配大屏脚本
(function (win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn("将根据已有的meta标签来设置缩放比例");
var match = metaEl
.getAttribute("content")
// eslint-disable-next-line no-useless-escape
.match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute("content");
if (content) {
// eslint-disable-next-line no-useless-escape
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
// eslint-disable-next-line no-useless-escape
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
// var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute("data-dpr", dpr);
if (!metaEl) {
metaEl = doc.createElement("meta");
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute(
"content",
"initial-scale=" +
scale +
", maximum-scale=" +
scale +
", minimum-scale=" +
scale +
", user-scalable=no"
);
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem;
}
win.addEventListener(
"resize",
function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
},
false
);
win.addEventListener(
"pageshow",
function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
},
false
);
if (doc.readyState === "complete") {
doc.body.style.fontSize = 12 * dpr + "px";
} else {
doc.addEventListener(
"DOMContentLoaded",
function () {
doc.body.style.fontSize = 12 * dpr + "px";
},
false
);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function (d) {
var val = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) {
val += "px";
}
return val;
};
flexible.px2rem = function (d) {
var val = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) {
val += "rem";
}
return val;
};
})(window, window["lib"] || (window["lib"] = {}));
// 在Vue 项目中使用:
import "./utils/flexible";
