2024-04-23 今日 google 过的知识点

数字大屏适配

• rem
• scale

function useScale(domRef, designDraftWidth = 1920, designDraftHeight = 960) {
   //designDraftWidth 设计稿的宽度 
   //designDraftHeight 设计稿的高度 
   
   //根据屏幕的变化适配的比例
   function handleResize() {
       const scale = window.innerWidth / window.innerHeight 
        < designDraftWidth / designDraftHeight 
        ? (window.innerWidth / designDraftWidth) 
        : (window.innerHeight / designDraftHeight);

      domRef.current.style.transform = `scale(${scale}) translate(-50%)`; 
      domRef.current.style.transformOrigin = '0 0'; // 确保缩放后居中
   }
   // 
   const changeResize = debounce<UIEvent>(handleResize, 100);
   
  //React的生命周期 如果你是vue可以放到mountd或created中 
  useEffect(() => { 
      //初始化自适应 ----在刚显示的时候就开始适配一次 
      handleResize(); 
      //绑定自适应函数 ---防止浏览器栏变化后不再适配
      window.onresize = () => changeResize(); 
      //退出大屏后自适应消失
      return () => window.onresize = null; }, 
  [])

}

• zoom

还是上面计算处理的比例，直接使用 zoom
domRef.current.style.zoom = scaleFactor;

2024-04-23