Front-End SolutionsAppearance
基础框架
选择 UI 框架
可以使用 Element UI 或者 Element Plus，根据实际情况选择一个：
Element UI：意味着使用 Vue 2，支持 IE 浏览器，Vue 2 的生态丰富。
Element Plus：意味着使用 Vue 3，不支持 IE 浏览器，Vue3 的生态不够丰富。
我个人认为，大屏是针对少量特定用户的，且考虑到效果华丽容易卡顿，因此应推荐特定用户安装现代浏览器，所以没有必要考虑兼容 IE 浏览器，唯一需要考虑的就是 Vue 3 的生态是否能满足项目需求，如果能满足，则尽量选择 Element Plus。
适应不同视口宽度
我们利用<meta name="viewport">来兼容不同分辨率。
首先按照主流的显示器分辨率开发，目前主流是
1920px。在
<head></head>最顶部使用下方代码替换原有的<meta name="viewport" content="..." />：
html
<head>
<meta name="viewport" id="meta-viewport" />
<script>
document.getElementById('meta-viewport').content =
'width=1920, initial-scale=' +
document.documentElement.clientWidth / 1920 +
', maximum-scale=' +
document.documentElement.clientWidth / 1920 +
', minimum-scale=' +
document.documentElement.clientWidth / 1920;
</script>
<!-- ... 其他原有内容 -->
</head>
适应不同视口高度
页面高度
为便于开发起见，开发环境先写死<html></html>和<body></body>高度，比如对于 16:9 显示器可以设为800px，写死的值便于随心所欲开启 Chrome Devtools，这样 Devtools 不会挤压页面高度。生产环境下高度应替换为document.documentElement.clientHeight，使用 JS 设置。
区块和内部元素高度
区块和区块内部元素使用height: n%和flex: n来控制高度，优先使用height。
如何计算明确的高度值？
某些第三方图表组件和<canvas></canvas>元素会要求你传入明确的像素值，该怎么办？
宽度：好办，直接写像素值即可，因为值基于
1920px宽度，是明确的。高度：不明确，需要基于视口高度动态计算，开发环境基于
800px按比例换算，生产环境基于document.documentElement.clientHeight按比例换算。比如开发环境一个<canvas></canvas>的高度设为240px很合适，那么生产环境下它的高度应设为document.documentElement.clientHeight * 240 / 800 + 'px'。