[JavaScript知识库]scale实现页面缩放自适应

使用注意事项

1. 代码中的所有的宽高是指正常视图下的宽高，我的项目是大屏，所以正常视图下是 1920 * 1080，普通 PC 项目，那应该是 1920 * 937
2. 由于缩放是对 #app 进行的操作，很多UI框架的全局弹窗无效，因为弹窗不包含在 #app 元素中，可查看框架是否有提供API指定弹窗位置，Element-ui 是有的

/**
 * 需要有一个 #app 元素，并有如下样式
 * width: 1920px; 
 * height: 1080px;
 * position: absolute;
 * top: 50%;
 * left: 50%;
 * transform: translate(-50%, -50%);
 */
 function setCalc () {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scaleX = document.documentElement.clientWidth / 1920
  const scaleY = document.documentElement.clientHeight / 1080
  const app = document.getElementById('app')
  // 需要取缩放倍数较小的，因为需要宽高都兼容
  if(scaleX > scaleY) {
    app.style.transform = `translate(-50%, -50%) scale(${scaleY})`
  } else {
    app.style.transform = `translate(-50%, -50%) scale(${scaleX})`
  }
}
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setCalc()
}

export default function init() {
  setCalc()
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖