前端大屏项目适配方法

要在F11全屏模式下查看

方法一，rem + font-size

动态设置HTML根字体大小 和 body 字体大小（lib_flexible.js）

• 将设计稿的宽（1920）平均分成 24 等份， 每一份为 80px。
• HTML字体大小就设置为 80 px，即1rem = 80px， 24rem = 1920px
• body字体大小设置为 16px。
• 安装 cssrem 插件， root font size 设置为 80px。
• 
• lib_flexible.js

• (function flexible (window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1
  
    // adjust body font size
    function setBodyFontSize () {
      if (document.body) {
        document.body.style.fontSize = (16 * dpr) + 'px'
      }
      else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
    }
    setBodyFontSize();
  
    // set 1rem = viewWidth / 10
    function setRemUnit () {
      var rem = docEl.clientWidth / 24
      docEl.style.fontSize = rem + 'px'
    }
  
    setRemUnit()
  
    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })
  
    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement('body')
      var testElement = document.createElement('div')
      testElement.style.border = '.5px solid transparent'
      fakeBody.appendChild(testElement)
      docEl.appendChild(fakeBody)
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines')
      }
      docEl.removeChild(fakeBody)
    }
  }(window, document))

方法二，使用CSS3中的scale函数来缩放网页

根元素

 .screen {
   display: inline-block;
   width: 1920px;  //设计稿的宽度
  height: 1080px;  //设计稿的高度
   transform-origin: 0 0;
  position: absolute;
   left: 50%;
  top: 50%;
}

react

  // useEffect(() => {
  //   const handleScreenAuto = () => {
  //     const designDraftWidth = 1920; // 设计稿的宽度
  //     const designDraftHeight = 1080; // 设计稿的高度
  //     // 根据屏幕的变化适配的比例
  //     const scale =document.documentElement.clientWidth /document.documentElement.clientHeight <designDraftWidth / designDraftHeight? document.documentElement.clientWidth / designDraftWidth: document.documentElement.clientHeight / designDraftHeight;
  //     const screenElement = document.querySelector('#screen') as HTMLElement;
  //     if (screenElement) {
  //       screenElement.style.transform = `scale(${scale}) translate(-50%, -50%)`;
  //     }
  //   };
  //   // 调用一次以确保初始样式正确设置
  //   handleScreenAuto();

  //   // 监听窗口大小变化事件，并触发自动适配函数
  //   window.onresize = handleScreenAuto;

  //   // 组件卸载时清除事件监听器
  //   return () => {
  //     window.onresize = null;
  //   };
  // }, []); // useEffect 依赖项为空数组，表示仅在组件挂载和卸载时执行一次

这种方法两侧可能会留白，用背景图填充上