数据大屏自适应方案-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

数据大屏自适应方案

[导读]:使用scale方式进行屏幕缩放实现适配大屏。无需特定编写rem,也不用考虑单位不一致导致的适配无效(%px随便用)。原理:当我屏幕大小与设计稿大小不符的时候,计算缩放的比例,从而设置盒子的scale属性。实例:Vue2用户可直接复制代码看看。react或angular用户参考示例琢磨一下以上3种方案在实际应用中该怎么选择视具体情况而...

使用scale方式进行屏幕缩放实现适配大屏。无需特定编写rem,也不用考虑单位不一致导致的适配无效(%px随便用)。

原理:当我屏幕大小与设计稿大小不符的时候,计算缩放的比例,从而设置盒子的scale属性。

实例:Vue2用户可直接复制代码看看。react或angular用户参考示例琢磨一下

image.png

以上3种方案在实际应用中该怎么选择视具体情况而定,也有看到大家说自适应在地图的适配中会有一些兼容问题,我这边还没有实践过。

如果想简单,客户能同意留白,选用scale即可

如果需要兼容不同比例的大屏,并且想在不同比例中都有比较好的效果,图表占满屏幕,类似于移动端的响应式,可以采用vm vh的方案

至于rem,个人觉得就是scale和vm vh的综合,最终的效果跟scale差不多

接下来介绍下三种方案的具体实现,方案中的代码都以vue2.0和vue-cli3搭建的vue项目为例,因为是demo,图表的一些细节就没有过多细致的调整了


<template>
  <div>
    <div
         id="screen">
      <div>
        <div>
          侧边栏
        </div>
        <div>
          <header>这是头部</header>
          <section style="height: 500px;">这是身体</section>
          <footer>这是脚</footer>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  mounted () {
    this.handlerScale()
    window.onresize = () => this.handlerScale();
  },
  methods: {
    handlerScale () {
      let designWidth = 1920;   //设计图的宽度
      let designHeight = 620;   //设计图的高度
      const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight
        ? (document.documentElement.clientWidth / designWidth)
        : (document.documentElement.clientHeight / designHeight)
      document.getElementById('screen').style.transform = `scale(${scale}) translate(-50%)`
    }
  },
  destroyed () {
    window.onresize = null;
  },
}
</script>
 
<style  scoped>
.box {
  width: 100%;
  height: 100%;
}
.box .screen {
  width: 1920px;
  height: 100px;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
}
.box .contain-box {
  display: flex;
}
.box .contain-box div:first-of-type {
  width: 200px;
  background-color: purple;
}
.box .contain-box div:last-of-type {
  flex: 1;
}
header {
  width: 100%;
  background-color: pink;
}
section {
  width: 100%;
  background-color: greenyellow;
}
footer {
  width: 100%;
  background-color: red;
}
</style>


本文来自E先生的博客,如若转载,请注明出处:https://javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ