共计 3180 个字符，预计需要花费 8 分钟才能阅读完成。
大屏
大屏是什么呢？再我前几年刚接触这个词得时候很新鲜，全名叫态势感知大屏，大屏得特点是炫酷、难看，给用户满满得科技感。听一位前辈说当年再招标会上，再都用 exel、word 做界面图表文档得时候，有一家公司把可视化态势感知大屏展现进去了，间接秒杀其余厂家。那么当咱们开发一款大屏点的时候须要留神什么呢？
适配
再适配得技术概念上分为真适配、伪适配。那么什么叫做真适配、伪适配呢？
伪适配
伪适配就是利用 csstransform: scale(1); 达到一个界面适配。
长处：
适配比拟快，就应用失常 px 开发就好了，监听下分辨率做一个 scale 缩放。
毛病：
png、canvas 等要转成 svg，不然就会含糊、不清晰。
真适配
真适配就是利用 vw、vh、rem、%，达到一个界面得真适配。
vw 100vw 等于以后窗口屏幕得宽度；
vh 100vh 等于以后窗口屏幕得高度；
rem 次要依据根元素 body 得 font-size：12px, 1rem 等于 12px, 而后跟用窗口得大小赋值给 body 对应得 fontSize;
长处：
再开发阶段须要间接应用对应得尺寸单位，或者利用 postcss-px-to-viewport、postcss-pxtorem 等 postcss 插件达到一个 px 得转换。（集体倡议再开发阶段间接应用适配单位，插件还是有或多或少得问题）。
毛病：
要针对性进行每个元素进行单位适配，略微有些老本（能够利用 vscode 插件间接实现转化）；
vscode 插件：【px2vw】针对 css、less、sass 能够实现单位转化，然而他不反对.vue 文件中 style 的转换。
vscode 插件：【px2xx】这个插件能满足咱们开发单位转换。
真适配又分为 高度适配、宽度适配。
宽度适配就是依据用户得屏幕窗口宽度发生变化做到一个界面适配，比方全副都应用 vw。
高度适配是依据用户屏幕窗口发生变化达到一个界面适配，比方应用 vh;
其实集体认为没必要做高度适配、都依据宽度 vw 达到一个界面适配就好了，次要是因为做高度适配得话应用 vh，再小点得屏幕上 很容易就产生文本重叠、界面不美观、因为文字大小再浏览器最小是 12px 嘛。
大屏界面布局
其实个别大屏布局会又一个 header（主题目、工夫展现）、side（副标题：屏幕的两侧可能会分为 4 块 4 个维度去展现以后屏的一些信息）、main(大屏主视图)、footer（底部）。
咱们再搭建容器应用的都是定位那么肯定要分清定位权重。
上面是一个常见布局权重散布：
header 应该是 position: absolute;top：0; height: 60px(须要实现对应设计搞单位转换)：z-index：2; 权重是 2;
side 应该是 position: absolute; top: 60px(header 的高度);
leftSide 应该是 position: absolute; top: 0; left: 0; z-index: 2; 权重 2
leftTopSide 应该是 position: absolute; top: 10px(间距); z-index: 3; 权重 3
leftBottomSide 应该是 position: absolute; bottom: 10px（间距）; z-index: 3; 权重 3
rightSide 应该是 position: absolute; top: 0; righht: 0; z-index: 2; 权重 2
rightTopSide 应该是 position: absolute; top: 10px(间距); z-index: 3; 权重 3
rightBottomSide 应该是 position: absolute; bottom: 10px（间距）; z-index: 3; 权重 3
main 应该是 position: absolute; top: 60px(header 的高度);z-index: 1; 权重 1
footer 应该是 position: absolute; bottom: 0px; z-index: 2; 权重 2
组件划分
其实再大屏中个别设计会遵循主题目（header）、副标题（side、footer）而后主视图这么去设计;
那么其实副标题应该都是长一个样，咱们能够封成一个 card 组件供大屏应用（vue 设计能够参考 el-card）。
空组件 每个模块应该都要思考数据为空的状况；
loading 组件，每个模块都应该有 loading 加载的动作；
工夫
提供一份工夫的代码
import moment from ‘moment’;
// import days from ‘days’;
const WEEKLY_MAP = {
1: ‘ 星期一 ’,
2: ‘ 星期二 ’,
3: ‘ 星期三 ’,
4: ‘ 星期四 ’,
5: ‘ 星期五 ’,
6: ‘ 星期六 ’,
7: ‘ 星期天 ’,
};
export const getWeekly = () => WEEKLY_MAP[new Date().getDay()];
export const getDate = () => moment().format(‘YYYY-MM-DD’);
// 这个应该是定时器循环去调用的
export const getTime = () => moment().format(‘HH:mm:ss’);
复制代码
全屏
全屏性能再大屏中也是必要的性能，上面提供一份全屏相干的函数。
// fullscreen.js
// element 是尼的全屏的容器，进入全屏
export function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();}
}
// 退出全屏
export function exitFullscreen() {
if (document.exitFullScreen) {
document.exitFullScreen();} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();} else if (element.msExitFullscreen) {
element.msExitFullscreen();}
}
// 判断是否再全屏
export function isFullScreen() {
return !!(
document.fullscreen
|| document.mozFullScreen
|| document.webkitIsFullScreen
|| document.webkitFullScreen
|| document.msFullScreen);
}
复制代码
select 组件
Select 组件再大屏中用的时候须要留神 肯定要:popper-append-to-body=”false” 为 false。让插入到以后容器外面 不要让再 body 里，不然再全屏下就看不到下拉菜单了。
文本
其实再依据设计搞咱们用 rem、vw、vh 也很容易会让文字超出以后容器，那么咱们再开发阶段就应该思考到文本超出的状况，做好文本省略，呈现 title。不然测试会给尼提 bug 的;
动画
针对数字滚动能够应用 vue 数字滚动组件 react 数字滚动组件
我比拟罕用的 css animate 动画库; 外面比拟丰盛渐入、渐出等等；