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

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

26 人参与  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+后续+结局在线阅读
  • 假千金要交换人生?我抱着空间做首富爽文_苏木青赵景城虐心反转_小说后续在线阅读_无删减免费完结_
  • 温时雨谢远之续集(清风难渡无缘人)全本完整免费版_起点章节+后续(温时雨谢远之)
  • 订婚两个月后,未婚夫要摆脱包办婚姻精心打造_肖明宝宝宾客故事会_小说后续在线阅读_无删减免费完结_
  • 霍景琛,苏晚,林深昔年请深如海,终不敌薄凉附加(霍景琛,苏晚,林深)(昔年请深如海,终不敌薄凉)全本浏览阅读连载中
  • 新章速递汤安甯,白子奕,汤贝贝是什么小说(结婚十年,回归家庭的老婆在外有二胎了)完本阅读无广告(结婚十年,回归家庭的老婆在外有二胎了)
  • 娇牛马导师偷我论文99篇成功升博导,我让他牢底坐穿精校文本_周老师师姐师兄爽文_小说后续在线阅读_无删减免费完结_
  • 独家顾宇,罗薇:结局+番外精编之作(资助生装阔气,我可不参加)电子书畅享阅读
  • 宗门全员重生,小师妹摆烂不干了(君拂君芙蓉)_宗门全员重生,小师妹摆烂不干了
  • 成了高考状元后,我倒欠两百万完结txt_阿姨叶青江安TOP10_小说后续在线阅读_无删减免费完结_
  • 嫁绝嗣长官,好孕作精在七零躺赢小说(顾嘉宁)序章+全章阅读(嫁绝嗣长官,好孕作精在七零躺赢)最新章节

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

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