前端大屏项目适配方法

要在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 依赖项为空数组，表示仅在组件挂载和卸载时执行一次

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