vue2的scale方式适配大屏

代码

js 复制代码
mounted(){
    //初始化自适应  ----在刚显示的时候就开始适配一次
    handleScreenAuto();
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => handleScreenAuto();
},
destroyed(){
    window.onresize = null;
},
methods: {
    //数据大屏自适应函数
    const handleScreenAuto = (): void => {
        const designDraftWidth = 1920;//设计稿的宽度
        const designDraftHeight = 960;//设计稿的高度
        //根据屏幕的变化适配的比例
        const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
            (document.documentElement.clientWidth / designDraftWidth) :
            (document.documentElement.clientHeight / designDraftHeight);
        //缩放比例
        (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
    }
}
html 复制代码
<template>
    <div className="screen-wrapper">
        <div className="screen" id="screen">

        </div>
    </div>
</template>
css 复制代码
    .screen-root {
    height: 100%;
    width: 100%;

    .screen {
        display: inline-block;
        width: 1920px;
    / / 设计稿的宽度 height: 960 px;
    / / 设计稿的高度 transform-origin: 0 0;
        position: absolute;
        left: 50%;
    }
}

将上述生命周期和methods中的代码复制,然后在id为screen的div中编写数据大屏即可。

缺点:

  • 内部组件如果用了鼠标坐标点这些,会有偏移的。比如 slider滑块这些依赖 clientX 这些的。
  • 如果大屏内存在地图组件的交互,存在点错位问题
相关推荐
xw51 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !1 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
拾光拾趣录1 小时前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
huxihua20062 小时前
各种前端框架界面
前端
拾光拾趣录2 小时前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam2 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录2 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录3 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区3 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠3 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css