一、认识大屏设备
1. 认识大屏
- 在开发网页时,一般适配最多的屏幕尺寸
- PC端电脑:1920px * 1080px
- 移动设备:750px * auto
- 生活中,经常会见到一些比较大的屏幕,比如:指挥大厅、展厅、展会中的大屏。这些设备就可以称之为大屏设备。
- 大屏的应用场景
- 通常用在数据可视化,借助于图形化手段,清晰有效地传达与沟通信息。
- 大屏的硬件设备的分类
2. 大屏设备
- 拼接屏
- 拼接屏就是很多屏幕按照一定拼接方式拼接而成的。
- 常见的使用场景有指挥大厅、展厅、展会等等。
- LED屏
- LED也是现在大屏中常用的硬件,它是若干单体屏幕模块组成的,它的像素点计算及拼接方式与拼接屏有很大区别。
- LED可以看成是矩阵点阵,具体拼接方式也会根据现场实际情况有所不同,拼接方式的不同直接影响到设计的尺寸规则。
3. 定设计稿尺寸
- 拼接屏
- 大多数屏幕分辨率是1920*1080,拼接屏可以按照横竖计算后的总和作为设计尺寸。
- 正常设计建议最好保持在4K内,超过4K会产生很多问题。
- 尺寸过大的不太适合按照原尺寸设计,超过4K保持大屏的等比缩放即可。
- LED屏
- LED大屏是由若干单体屏幕模块组成的,LED屏有很多规格,但是规格计算方法相同。
- 比如,用单体为500*500的作为标准计算,每个单体模块像素点横竖都为128px。
- 如果横向12块竖向6块,横向像素为12812=1536px,竖向1286=768px,建议见谅保持在4K以下。
- 移动端大屏
- 移动端的大屏展示,基本按照实际尺寸设计即可。
- 比如750auto,设计稿尺寸:750auto
二、大屏适配方案
1. 百分比设置
2. rem单位 + 动态设置html的font-size
- 动态设置HTML根字体大小和body字体大小(lib_flexible.js)
- 将设计稿的宽(1920)平均分成24等份,每一份为80px。
- HTML字体大小设置为80px,即1rem=80px,24rem=1920px。
- body字体大小设置为16px。
- 安装cssrem插件,root font size设置为80px。这是px单位转rem的参考值。
- 接着就可以按照 1920px * 1080px 的设计稿开发,此时的页面已经是响应式,并且宽高比不变。
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 16 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function (e) {
if (e.persisted) {
setRemUnit();
}
});
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);
3. vw单位
- 直接使用vw单位
- 屏幕的宽默认为100vw,那么100vw=1920px,1vw=19.2px。
- 安装cssrem插件,body的宽高(1920px*1080px)直接把px单位转vw单位。
- 接着就可以按照 1920px * 1080px 的设计稿开发,此时的页面已经是响应式,并且宽高比不变。
4. flex弹性布局
5. scale等比例缩放(推荐)
- 方案一:直接根据宽度的比率进行缩放。(宽度比率=网页当前宽/设计稿宽)
let targetX = 1920
let currentX = document.documentElement.clientWidth || document.body.clientWidth
let scaleRatio = currentX / targetX
document.body.scale = `transform: scale(${scaleRatio})`
- 方案二:动态计算网页宽高比,决定是否按照宽度的比率进行缩放。
let targetX = 1920
let targetY = 1080
let targetRatio = 16 / 9
let currentX = document.documentElement.clientWidth || document.body.clientWidth
let currentY = document.documentElement.clientHeight || document.body.clientHeight
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 {
document.body.style = `width: ${targetX}px; height: ${targetY}px; transform: scale(${scaleRatio})`
}
三、开发注意事项
- 字体大小设置问题(非scale方案需要考虑)
- 如果使用rem或vw单位时,在JS中添加样式,单位需要手动设置rem或vw。
- 第三方库的字体等默认的都是px单位,如:element、echarts,因此通常需要层叠第三方库的样式。
- 当大屏比例更大时,有些字体还需要相应的调整字号。
- 图片模糊问题
- 切图时切1倍图、2倍图,大屏用大图,小屏用小图。
- 建议使用SVG矢量图,保证放大缩小不会失真。
- ECharts渲染引擎的选择
- 动画卡顿优化
- 创建新的渲染层、启用GPU加速、善用CSS形变动画。
- 少用渐变和高斯模糊、当不需要动画时,及时关闭动画。
四、大屏项目实战