方案一：rem 单位+动态设置 html 的 font-size

动态设置 html 根字体的大小和 body 字体大小（使用 lib_flexible.js）

(资料图片)

• 将设计稿的宽（1920）平均分成 24 等份，每一份 80px；

• html 根字体大小就设置为 80px，即 1rem = 80px，24rem = 1920px（移动端推荐分为 10 份）；

• 将 body 字体大小设置为 16px；

• 最后需要使用插件或者其他方式将 px 转为 rem 单位：手动、less/scss 函数、cssrem 插件、webpack 插件、Vite 插件等。

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) {      // body 字体大小默认为 16px      document.body.style.fontSize = 16 * dpr + "px";    } else {      document.addEventListener("DOMContentLoaded", setBodyFontSize);    }  }  setBodyFontSize();  // 这里默认平均分成 10 等分(适用移动端)  // set 1rem = viewWidth / 24 ；（使用pc端）  function setRemUnit() {    var rem = docEl.clientWidth / 24; // 1920 / 24 = 80    docEl.style.fontSize = rem + "px"; // 设置 html字体的大小 80px  }  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);

方案二：vw 单位

直接使用 vw 单位，屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px 。

安装 cssrem 插件， body 的宽高（1920px * 1080px）直接把 px 单位转 vw 单位

其他 px 转 vw 方式：手动、less/scss 函数、cssrem 插件、webpack 插件、Vite 插件

方案三：scale 等比例缩放（推荐）

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

使用 CSS3 中的 scale 函数来缩放网页，我们可以使用两种方案来实现：

方案一：直接根据宽度的比率进行缩放。（宽度比率 = 网页当前宽 / 设计稿宽）

                              
      
1
      
2
      
3
      
4
      
5
      
6
    
    <script>      // 设计稿:  1920 * 1080      // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)      // 1.设计稿的尺寸      let targetX = 1920;      // let targetY = 1080      // let targetRatio = 16 / 9 // 宽高比率      // 2.拿到当前设备(浏览器)的宽度      let currentX = document.documentElement.clientWidth || document.body.clientWidth;      //  1920 * 1080  -> 3840 * 2160      // 3.计算缩放比例 (当前设备的宽度 / 设计稿的宽度)      let scaleRatio = currentX / targetX; // 参照宽度进行缩放      // 4.开始缩放网页 (缩放的原点在左上角)      document.body.style = `transform: scale(${scaleRatio})`;    </script>  

方案二：动态计算网页宽高比，决定是是否按照宽度的比率进行缩放。

                              
      
1
      
2
      
3
      
4
      
5
      
6
    
    <script>      // 设计稿:  1920 * 1080      // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)      // 1.设计稿的尺寸      let targetX = 1920;      let targetY = 1080;      let targetRatio = 16 / 9; // 宽高比率      // 2.拿到当前设备(浏览器)的宽度      let currentX = document.documentElement.clientWidth || document.body.clientWidth;      let currentY = document.documentElement.clientHeight || document.body.clientHeight;      //  1920 * 1080  -> 3840 * 2160      // 3.计算缩放比例      let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )      let currentRatio = currentX / currentY; // 宽高比率      // 超宽屏      if (currentRatio > targetRatio) {        // 如果当前设备的宽高比率大于设计稿的宽高比率,那么就以高度为参照进行缩放，并且居中显示        scaleRatio = currentY / targetY;        document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`;      } else {        // 4.开始缩放网页        document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`;      }    </script>  

三种适配放案对比

vw 相比 rem 的优势

优势一：不需要去计算html的font-size大小，不需要给html设置font-size，也不需要设置body的font-size，防止继承；

优势二：因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱；

优势三：vw相比rem更加语义化。1vw是1/100的viewport大小（即将屏幕分成100份）；并且具备rem之前所有的优点。

vw 和 rem 存在的问题

如果使用rem活vw单位时，在 js 中添加样式时，单位需要手动设置rem或vw。

第三方库（Element、Echarts等）的字体一般默认都是px单位，因此通常需要层叠第三方库的样式。

当大屏比例更大时，有些字体还需要相应的调整字号。

scale相比vw和rem的优势

优势一：相比于vw和rem，使用起来更简单，不需要对单位进行换算

优势二：因为不需要对单位进行换算，在使用第三方库时，不需要考虑单位转换问题

优势三：由于浏览器的字体默认最小是不能超过12px，导致rem或vw无法设置小于12px的字体，scale缩放没有这个问题。

大屏开发注意事项

1.字体大小设置问题（如上对比，scale不需要考虑这个问题）

2.图片模糊问题

• 切图时切1倍图、2倍图、大屏用大图，小屏用小图；

• 建议都使用 svg 矢量图，保证放大和缩小不会失真。

3.Echarts 渲染引擎的选择

推荐使用 SVG 渲染引擎，SVG 图扩展性更好，适合一些定制化操作。

4.动画卡顿优化

• 创建新的渲染层：减少回流

  • 有明确的定位属性（relative、fixed、sticky、absolute）

  • 透明度（opacity 小于 1）

  • 有 CSS transform 属性（不为 none）

  • 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画

  • backface-visibility 属性为 hidden

• 启动GPU加速：创建合成层，合成层会开始GPU加速页面渲染，但不能滥用，过多渲染层会以消耗内存为代价

  • 对 opacity、transform、fliter、backdropfilter应用了animation或transition（需要是active的animation或者 transition）

  • 有 3D transform 函数：比如： translate3d、 translateZ、 scale3d 、 rotate3d ...

  • will-change 设置为 opacity、transform、top、left、bottom、right，比如：will-change: opacity , transform;其中 top、left等需要设置明确的定位属性，如 relative 等

• 少用渐变和高斯模糊，当不需要动画时，及时关闭动画。

关键词：