在数据大屏项目中，屏幕适配一直是一个很头疼的问题。因为不同屏幕尺寸和分辨率的设备太多，而且不同设备的像素密度也不同，这导致在不同设备上显示的效果可能会有很大的差异。为了解决这个问题，我们需要采用一种适合大屏幕的适配方案，以保证在不同设备上都能够完美展示数据大屏的效果。
接下来，分享一下我在数据大屏项目中使用 rem 适配方案的实践经验和技巧。rem介绍
首先，我们需要了解什么是rem？rem 是一种相对单位，表示根元素的字体大小。
通常根元素的字体大小设置为16px，即html{fontsize:16px;}，这时，rem的计算公式为：1rem=16px。
由于rem是相对单位，因此它可以根据屏幕尺寸和分辨率进行自适应，从而实现屏幕适配的效果。
在大屏适配中，1rem的计算公式为 1rem = 页面有效宽度 / 100
大屏适配公式
在大屏展示时，我们一般需要的效果是：页面始终都是左右居中、上下居中，四周留白。如下图所示：
为了实现这个效果，我们可以使用下面的适配公式：
Wp 即为页面有效宽度，Hp为页面有效高度。 代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>大屏可视化项目</title>
<style>
#root {
margin: 0 auto;
background: #52d155;
}
</style>
<script>
const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
let pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
const pageHeight = pageWidth / (16 / 9)
const string = `<style>html{
font-size: ${pageWidth / 100}px
}</style>`
document.write(string)
</script>
</head>
<body>
<div id="root"></div>
<script>
root.style.width = pageWidth + 'px'
root.style.height = pageHeight + 'px'
root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>
<script type="module" src="/src/main.tsx">
</script>
</body>
</html>
我们先获取设备的宽高，然后根据公式计算出页面的有效宽高，之后就能得出1rm的具体大小，最后通过JS设置font-size的值为1rm即可。注意不要忘记将有效宽高绑定到div,并设置div页面居中。
如何适配一个div?
上面我们已经确定了1rem的值，那么我们如何去适配一个div呢？公式如下：
即假设一个div在设计稿中宽为367px，高为315px，设计稿宽为2420px，那么这个div在页面中的宽为367 / 2420 × 100rem，高为315 / 2420 × 100rem。代码如下：
width: 367 / 2420 × 100rem;
height: 315 / 2420 × 100rem;
为了方便在后续的开发中使用，我们可以写一个 px() 函数来将像素值转换成 rem 值。这样，我们就可以直接在 CSS 中使用像素值来表示长度，而无需手动计算 rem 值。代码如下：
@function px($n) {
@return $n / 2420 * 100rem;
}
.x {
width: px(367);
height: px(315);
}
好了，以上就是数据大屏适配的rem方案，希望这个方案可以对大家有所帮助。如有不足和错误之处，欢迎各位大佬批评指正。 项目链接：大屏可视化项目 (gitee.io)
