当前位置:首页 » 《随便一记》 » 正文

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

14 人参与  2024年02月15日 14:16  分类 : 《随便一记》  评论

点击全文阅读


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

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

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

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

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

前端实现大屏缩放自适应屏幕思路:
页面初始化获取屏幕的原始比例 将自适应元素的scale变量设置为当前比例 监听浏览器窗口大小,获取新的比例值重新给元素scale赋值

<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>

点击全文阅读


本文链接:http://zhangshiyu.com/post/68577.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1