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

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

27 人参与  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://m.zhangshiyu.com/post/68577.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

最新文章

  • 热文推荐时廷之容晚柔附加(时廷之容晚柔)妻妹娇且软,偏执将军只为她折腰:结局+番外免费品鉴
  • 病树前头万木春后续_袁媛胡彦宇林立全文+后续_小说后续在线阅读_无删减免费完结_
  • (原形毕露)原形毕露小说(朱颜,周启安)整书在线无广告高口碑小说
  • 冬季宜密雪:结局+番外精编之作(季雯,江随筝)完整章节列表_笔趣阁
  • 完结文末日重生我囤十亿物资杀穿尸潮列表_完结文末日重生我囤十亿物资杀穿尸潮(林野苏晴)
  • 小说江诗云路明哲小说已更新+番外篇章(年少的爱终将散去)纯净阅读
  • 真千金伪装大学生在自家公司实习让狗爬后一口气看完_宋氏小林小姑娘高分神作_小说后续在线阅读_无删减免费完结_
  • 萧逸尘,楚璃,叶紫嫣爱恨决绝,此生不见番外(爱恨决绝,此生不见)TXT+后续+结局在线阅读
  • 假千金要交换人生?我抱着空间做首富爽文_苏木青赵景城虐心反转_小说后续在线阅读_无删减免费完结_
  • 温时雨谢远之续集(清风难渡无缘人)全本完整免费版_起点章节+后续(温时雨谢远之)
  • 订婚两个月后,未婚夫要摆脱包办婚姻精心打造_肖明宝宝宾客故事会_小说后续在线阅读_无删减免费完结_
  • 霍景琛,苏晚,林深昔年请深如海,终不敌薄凉附加(霍景琛,苏晚,林深)(昔年请深如海,终不敌薄凉)全本浏览阅读连载中

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

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