前端页面可视化大屏适配方案
无论窗口缩放,屏幕放大缩小,我们的可视化界面都可以按照设计图比例正常展示,不会出现字体模块爆出,或者拉伸问题。这就是我想要的适配方案。
html
<div id="appRef">
<div>html页面</div>
</div>
css
#appRef{
width: 1920px; /* 设计图宽 */
height: 1080px; /* 设计图高 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
overflow: hidden;
}
JS
// * 默认缩放值
const scale = {
width: '1',
height: '1',
}
// * 设计稿尺寸(px)
const baseWidth = 1920
const baseHeight = 960
// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
let drawTiming = null
calcRate()
window.addEventListener('resize', resize)
// * 初始化页面比例
function calcRate() {
const appRef = document.getElementById("appRef")
if (!appRef) return
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (appRef) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
} else {
// 表示更高
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
}
}
}
// * 窗口大小变化
function resize() {
clearTimeout(drawTiming)
// 加延迟是为了更好的看到变化的过程,不需要的可以不用
drawTiming = setTimeout(() => {
calcRate()
}, 200)
}
var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
document.body.style.zoom = 1 / t; // 就去修改页面的缩放比例
window.onresize = function () {
location.reload();
}
原文地址:https://blog.csdn.net/weixin_68522070/article/details/136283335
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!