页面自适应

开发一个数据看板

希望页面的图标都是自适应窗口

不受缩放的影响

先明确三个常量

设计width

设计height

页面最小适应宽度MinDesignWidth

import { debounce } from 'lodash';
const DesignWdith=928
const DesignHeight=942
const MinFlexibleWdith=928

const handleResize=()=>{
  // 窗口宽度
  const realWidth=window.innerWidth
  // 缩放比例
  const scaleRatio=realWidth>MinFlexibleWdith?realWidth/DesignWdith:MinFlexibleWdith/DesignWdith
  if(realWidth>=MinFlexibleWdith){
    document.body.style.overflowX='hidden'
  }else{
    document.body.style.overflowX='auto'
  }
  if(scaleRatio<1){
    document.body.style.height=`${DesignHeight*scaleRatio}px`
    document.body.style.width=`${window.innerWidth}`
  }
  document.querySelector('#root')?.setAttribute('style',`transform:scale(${scaleRatio})`)

}
  const dubounceHandleResize=debounce(handleResize,100)

const initFlexible=()=>{
  handleResize()
  window.addEventListener('resize',dubounceHandleResize)
}
export default initFlexible