transform:scale实现大屏自适应

小结一波~

---

前言

大屏使用rem 耗时 而且对浏览器最小字体不支持，使用transform:scale可以节省百分之九十工作量且保证页面宽高在任何情况下等比例缩放

一、使用步骤

1.在src文件下的utils文件夹里新建fixer.js文件(名字自定义)

代码如下（示例）：

//先用设计图3840x1080的模式当基础宽高，项目开始可以根据设计图自定义
// 1080px
let baseHeight = 1080
// 3840px
let baseWidth = 3840
const graphicSize = {
  height: 1080,
  width: 3840,
  scale:1,
}

function getAntiScaleRatio(scaleRatio) {
  const seed = 1000000000
  return seed / (seed * scaleRatio);
}

function calculateSize() {
  const scaleBigRatioHeight = baseHeight / document.body.offsetHeight
  graphicSize.height = document.body.offsetHeight * scaleBigRatioHeight;
  graphicSize.scale = getAntiScaleRatio(scaleBigRatioHeight)
  graphicSize.width = document.body.offsetWidth * scaleBigRatioHeight;
}

export function getGraphicSize() {
  calculateSize();
  return graphicSize;
};

export function bindWindowSizeChanged(callback) {
  calculateSize();
  window.onresize = () => {
    calculateSize.bind(this)();
    callback&&callback();
  }
}

2.主页面引入js文件

同时为了使页面都在屏幕内，最外层设置样式

.epidemic_home_box {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 0 0;
  overflow: hidden;}

 

总结

以上就是今天要讲的方法，简介明了~希望可以帮到你~