当前位置: 首页 > article >正文

vue等比例缩放页面用于网站,官网

1、目前设置的限制屏幕在1000-1770像素等比例缩放 

onMounted(() => {

  window.addEventListener("resize", bodyScale, false);

})

const bodyScale = () => {

  const deviceWidth = document.documentElement.clientWidth; // 获取当前分辨率下的可是区域宽度

  // 检查设备宽度是否在 1000 到 1770 之间

  if (deviceWidth > 1000 && deviceWidth < 1770) {

    const scale = deviceWidth / 1920; // 设计稿的尺寸为 1920

    document.documentElement.style.zoom = scale; // 根据比例放大或缩小

  } else {

    document.documentElement.style.zoom = 1; // 恢复默认缩放比例

  }

}

onUnmounted(() => {

  window.removeEventListener("resize", bodyScale, false); // 在组件销毁时移除监听器

});


http://www.kler.cn/a/304621.html

相关文章:

  • 速盾:高防 CDN 和 CDN 的缓存机制都一样吗?
  • 【操作系统】守护进程
  • 【STM32F1】——无线收发模块RF200与串口通信
  • MySQL45讲 第二十讲 幻读是什么,幻读有什么问题?
  • 使用pytest+openpyxl做接口自动化遇到的问题
  • 前端知识点---Javascript的对象(Javascript)
  • CAN数据记录仪与乘用车或者工程车辆OBD口连接注意事项
  • 演示:基于WPF的自绘的中国地铁轨道控件
  • [docker]入门
  • 【H2O2|全栈】关于CSS(4)CSS基础(四)
  • Java 算法:随机抽题
  • 最小堆 + 数学思维(重点) + 快速幂
  • java 自定义简单的线程池
  • Mysql 视图存储过程触发器
  • GD - GD32350R_EVAL - PWM实验和验证3 - EmbeddedBuilder - 无源蜂鸣器 - 用PMOS来控制
  • Android CustomDialog圆角背景不生效的问题
  • 使用 PyCharm 新建 Python 项目详解
  • turbo译码算法MAX, MAX_SCALE and MAX_STAR的比较
  • C 语言中表示对象大小的标准数据类型size_t
  • 备份服务器数据防护策略方法
  • 基于SpringBoot的在线汽车租赁信息管理系统
  • 【Java面试】第十一天
  • 九、外观模式
  • powerbi
  • QT中显示中文的几种方法及注意事项
  • JAVA毕业设计170—基于Java+Springboot+vue3+小程序的房屋租赁小程序系统(源代码+数据库)