怎样使定位元素随着【屏幕进行缩放】

img


两个子元素定位到父里面,但是缩放时候子元素应该因为定位关系,而不会进行缩放,有解决办法没

我写了一个方法,让body保持不动,你把代码拷贝到一个文件里 然后再main.js里面引入一下试试


```typescript
function handleScreen() {
  const m = detectZoom();
  (document.body.style as any).zoom = 100 / Number(m);
}

function detectZoom() {
  let ratio = 0;
  const screen: any = window.screen;
  const ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf("msie")) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  return ratio;
}
window.onresize = function () {
  handleScreen();
};
handleScreen();



```

给父级加个postion:relative