前端实现大屏缩放自适应屏幕

这篇具有很好参考价值的文章主要介绍了前端实现大屏缩放自适应屏幕。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在前端实现大屏缩放自适应屏幕的过程中,可以使用以下几种方式:

  1. 使用CSS3的缩放属性(transform: scale())来缩放页面元素,以适应不同大小的屏幕。缩放后,需要使用CSS来重新布局和调整页面元素的尺寸和位置。

  2. 使用CSS的@media查询来根据不同的屏幕大小调整元素的样式和布局。例如,在@media (max-width: 768px)中,可以设置针对小屏幕的样式和布局。

  3. 使用JavaScript来根据窗口大小调整元素的样式和布局。可以通过window.addEventListener监听resize事件,然后在事件处理程序中根据窗口大小进行调整。

需要注意的是,在使用上述方法时,需要考虑到元素的排版和布局,不要因为缩放而导致元素重叠或者间距过大。同时,也需要权衡页面的性能和效果,避免使用过多的CSS和JavaScript导致页面加载过慢。

前端实现大屏缩放自适应屏幕思路:
页面初始化获取屏幕的原始比例 将自适应元素的scale变量设置为当前比例 监听浏览器窗口大小,获取新的比例值重新给元素scale赋值文章来源地址https://www.toymoban.com/news/detail-828514.html

<template>
  <div
    class="ScaleBox"
    ref="ScaleBox"
    :style="{
      width: width + 'px',
      height: height + 'px'
    }"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    // 标准内容宽度
    uiContentWidth: {
      type: Number,
      default: 1920
    },
    // 标准内容高度
    uiContentHeight: {
      type: Number,
      default: 0
    },
    // 其他内容的宽度
    otherWidth: {
      type: Number,
      default: 300 //左侧菜单栏默认宽度,如果没有则忽略
    }
  },
  data () {
    return {
      width: 1920, // 初始宽
      height: 1080, // 初始高
      zoom: 1 // 计算要缩放的 宽度比(浏览器可视宽度与设计稿的宽度比)
    }
  },
  mounted () {
    this.setScale()
    window.addEventListener('resize', this.debounce(this.setScale, 100))
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.debounce)
  },
  methods: {
    getScale () {
      // 当前屏幕下需要适配内容的宽度 = 屏幕的宽度 - 其他不需要适配的内容的宽度
      const innerWidth = window.innerWidth - this.otherWidth
      // 内容元素需要改变的大小比例 = 当前屏幕尺寸需要变化到标准尺寸的比例 / 标准比例
      this.zoom = Number(innerWidth / this.uiContentWidth)
      // 设置缩放后的宽高
      this.width = innerWidth
    },
    setScale () {
      this.getScale()
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty('--scaleww', this.zoom)
        this.$refs.ScaleBox.style.setProperty('--scalewh', this.zoom)
      }
    },
    debounce (fn, delay) {
      const delays = delay || 500
      let timer
      return function () {
        const th = this
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(function () {
          timer = null
          fn.apply(th, args)
        }, delays)
      }
    }
  }
}
</script>

<style lang="scss">
body {
  &::-webkit-scrollbar {
    display: none;
  }
}
#ScaleBox {
  --scaleww: 1;
  --scalewh: 1;
}
.ScaleBox {
  transform: scale(var(--scaleww), var(--scalewh));
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  transition: 0.3s;
  z-index: 3;
}
.no-zoom {
  transform: scale(var(1 / --scaleww), var(1 / --scalewh));
}
</style>

到了这里,关于前端实现大屏缩放自适应屏幕的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 数据可视化大屏的页面布局以及自适应

    在做数据可视化大屏之前,我们需要考虑到页面的布局问题以及页面缩放自适应问题,下面分别就这两个方面讲解。 页面布局 类似这种页面区块的明显划分,常用的布局方式有两种: 1、 flex 布局 2、 grid 布局 grid布局 grid 布局可以按区块来划分页面布局,并且可以在划分布

    2024年02月05日
    浏览(53)
  • Vue3 +Echarts5 可视化大屏——屏幕适配

    项目基于Vue3 + Echarts5 开发,屏幕适配是使用 scale 方案 Echarts组件按需引入,减少打包体积 地图组件封装(全国省份地图按需加载) 效果图: 大屏适配常用的方案有 rem + vw/vh 和 scale 。 rem + vw/vh 方案 结合使用rem(相对于根元素字体大小的单位)和vw/vh(视窗宽度/高度的单位

    2024年02月15日
    浏览(48)
  • 【vue2可视化开发】新手会遇到的问题——大屏自适应

    开发可视化大屏第一步,必须要考虑适配不同屏幕的问题,在网络上查看资料,总结了一个目前最适合可视化开发的自适应方案——v-scale-screen组件 1. 安装 注:vue2使用v-scale-screen@1.0.0版本,vue3使用v-scale-screen@2.0.0版本 2. 在main.js中引用 3. 在vue组件中使用 v-scale-screen会将页面等

    2023年04月21日
    浏览(40)
  • 数据可视化大屏拼接屏开发实录:屏幕分辨率测试工具

    在数据可视化大屏开发时,确定数据可视化大屏拼接屏的板块尺寸需要考虑以下几个因素: 屏幕分辨率:首先需要知道每个板块屏幕的分辨率,包括宽度和高度,这决定了每个板块上可以显示的像素数量。 数据内容:了解需要展示的数据内容和类型,包括图表、文字、图像

    2024年02月15日
    浏览(49)
  • vue2+datav可视化数据大屏(3)附自适应各分辨率的大屏框架git代码。

    接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦         📓 我们在ser-views文件夹下新建9个vue组件,如下图所示,我给编号为1到9          📓在组件里写入内容我是第一块...一次类推,一直到第九块         📓 在主容器中引入组件,并注册

    2024年04月14日
    浏览(69)
  • 【前端可视化】前端大屏适配方案

    动态设置 html 根字体的大小和 body 字体大小(使用 lib_flexible.js) 将设计稿的宽(1920)平均分成 24 等份,每一份 80px; html 根字体大小就设置为 80px,即 1rem = 80px,24rem = 1920px(移动端推荐分为 10 份); 将 body 字体大小设置为 16px; 最后需要使用插件或者其他方式将 px 转为 rem 单位:

    2024年02月11日
    浏览(44)
  • 前端可视化数据大屏(1)

    效果图 技术架构:datav,vue2,echarts 我们一步一步的来实现一个简单的可视化数据大屏,开始吧!!         太简单了,百度上可以搜索,我这里就不多说了,把router装好就行         2.1在控制台上输入命令下载datav         2.2 将datav的组件注册为全局组件              

    2024年02月06日
    浏览(50)
  • 大数据前端可视化大屏--前端开发之路

    从2016年开始接触可视化方向,一直想写一篇文章回顾一下这几年踩过的坑,接下来的这段时间里我会不定时的给大家分享一些可视化方面的经验和感悟,发出来跟大家一块分享一下、一起讨论讨论、共同学习进步。 这篇文章作为开端,之后会不定时的发出一系列的采坑记录

    2023年04月09日
    浏览(46)
  • 前端大屏可视化适配方案(通用模板,快速上手)

    在日常前端开发中,大屏项目是每个前端开发者必备技能,但是目前设备尺寸大小和分辨率都不相同,所以大屏适配成了一个头疼的问题。看到网上的实现方案有rem,flexible,zoom,百分比,总感觉没那么完美,于是自己研究了一下也借鉴了网上大神的方法,实现了一下这三种

    2024年02月12日
    浏览(56)
  • 【python可视化大屏】使用python实现可拖拽数据可视化大屏

    我在前几期分享了关于爬取weibo评论的爬虫,同时也分享了如何去进行数据可视化的操作。但是之前的可视化都是单独的,没有办法在一个界面上展示的。这样一来呢,大家在看的时候其实是很不方便的,就是没有办法一目了然的看到数据的规律。为了解决这个问题我使用p

    2024年02月03日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包