使用动态rem方案适配不同屏幕尺寸
2022-02-10 本文已影响0人
Yandhi233
大屏可视化项目在还原设计图时，需要考虑不同的屏幕尺寸，所以需要使用动态适配的方案来尽可能还原设计图。
要求
设计图比例为 16 / 9，需要在不同屏幕尺寸(浏览器视口尺寸)下，大屏页面都能保证比例不变，元素和字体大小根据屏幕大小自动适配。
设计方案
设计图尺寸为 16:9，屏幕尺寸有两种可能：
屏幕宽度:屏幕高度 > 16:9
此时设计图需要等比例放大，直到
显示高度 = 屏幕高度；
由于始终设计图宽度 : 设计图高度 = 16:9，
所以最终显示宽度 = 屏幕高度 * (16 / 9)，显示高度 = 显示宽度 / (16 / 9)；
屏幕宽度:屏幕高度 <= 16:9
此时始终
显示宽度 = 屏幕宽度，显示高度 = 显示宽度 / (16 / 9)
rem
rem 就是 <html>元素的 font-size，默认为 16px (浏览器默认font-size)
em 是字体中 ‘一个字’ 的宽度
px 像素大小
考虑到需要动态适配，不能使用像素单位，所以单位以屏幕宽度为标准 页面显示宽度 / 100 = 1rem，就能完美还原设计稿；
在页面渲染之前，使用 JS 获取设备宽度并设置 页面显示宽度 = 100rem
计算公式
通过计算公式，只需要知道一个元素在设计图中的尺寸就可以计算出在页面的显示尺寸；
可以通过自定义一个函数来计算出页面显示尺寸，从而达到动态适配的效果
实施步骤
在 index.html 的 head中获取浏览器宽高
<script>
const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
window.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>
在 body 中将获得的尺寸给根组件
<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>
给根组件 div 样式
<style>
#root {
margin: 0 auto;
background: lightgreen
}
</style>
效果如下：
随意改变窗口大小，刷新之后页面始终保持水平垂直居中，而且页面元素大小自适应，页面字体始终为
pageWidth / 100 px，也就是 1rem。
将总结出来的计算公式封装成一个函数，使用时只需要引入文件即可
@function px($n) {
@return $n / 设计图宽度* 100rem;
}
// 使用
.x {
height: px(100)
width: px(100)
}
