大屏可视化适配不同宽高比屏幕,保持网页宽高比不变的代码

ini 复制代码
const el=document.getElementById('app')
let width=1920
let height=1080
el.style.transformOrigin="top left"
function init(){
    const scaleX=innerWidth/width
    const scaleY=innerHeight/height
    const scale=Math.min(scaleX,scaleY)
    const left=(innerWidth-width*scale)/2
    const top=(innerHeight-height*scale) /2

    el.style.transform=`translate(${left}px,${top}px) scale(${scale})`
}
init()
addEventListener('resize',()=>{
    init()
})
相关推荐
韭菜炒大葱34 分钟前
前端经典面试题:从 URL 输入到页面展示,中间经历了什么?
前端·http·面试
swipe42 分钟前
纯函数、柯里化与函数组合:从原理到源码,构建更可维护的前端代码体系
前端·javascript·面试
远山枫谷43 分钟前
uniapp + Vue 自定义组件封装:自定义样式从入门到实战
前端·vue.js
Lee川1 小时前
JavaScript 中的 `this` 与变量查找:一场关于“身份”与“作用域”的深度博弈
前端·javascript·面试
顺遂3 小时前
基于Rokid CXR-M SDK的引导式作业辅导系统设计与实现
前端
代码搬运媛3 小时前
Generator 迭代器协议 & co 库底层原理+实战
前端
前端拿破轮3 小时前
从0到1搭建个人网站(三):用 Cloudflare R2 + PicGo 搭建高速图床
前端·后端·面试
功能啥都不会3 小时前
PM2 使用指南 - 踩坑记录
前端
HelloReader3 小时前
React 中 useState、useEffect、useRef 的区别与使用场景详解,终于有人讲明白了
前端
兆子龙3 小时前
CSS 里的「if」:@media、@supports 与即将到来的 @when/@else
前端