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

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()
})
相关推荐
青衫码上行2 分钟前
【Java Web学习 | 第四篇】CSS(3) -背景
java·前端·学习
.生产的驴3 分钟前
React 路由权限跳转 Token判断 路由控制 登录状态控制
前端·javascript·react.js·ajax·前端框架·c#·ecmascript
美狐美颜sdk7 小时前
跨平台直播美颜sdk集成攻略:Android、iOS与Web的统一方案
android·前端·ios
Airser7 小时前
npm启动Taro框架报错
前端·npm·taro
Anlici8 小时前
连载小说大学生课设 需求&架构
前端·javascript·后端
2501_938769999 小时前
React Server Components 进阶:数据预取与缓存
前端·react.js·缓存
蒜香拿铁9 小时前
Angular【基础语法】
前端·javascript·angular.js
xiaoxiao无脸男10 小时前
纯css:一个好玩的按钮边框动态动画
前端·css·css3
rookie_fly10 小时前
基于Vue的数字输入框指令
前端·vue.js·设计模式
元直数字电路验证10 小时前
ASP.NET Core Web APP(MVC)开发中无法全局配置 NuGet 包,该怎么解?
前端·javascript·ui·docker·asp.net·.net