方案一：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 函数来缩放网页，我们可以使用两种方案来实现：
方案一：直接根据宽度的比率进行缩放。(宽度比率 = 网页当前宽 / 设计稿宽)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body, ul { margin: 0; padding: 0; } body { width: 1920px; height: 1080px; box-sizing: border-box; border: 3px solid red; /* 指定缩放的原点在左上角 */ transform-origin: left top; } ul { width: 100%; height: 100%; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; } li { width: 33.333%; height: 50%; box-sizing: border-box; border: 2px solid green; font-size: 30px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <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> </body></html>方案二：动态计算网页宽高比，决定是是否按照宽度的比率进行缩放。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body, ul { margin: 0; padding: 0; } body { position: relative; width: 1920px; height: 1080px; box-sizing: border-box; border: 3px solid red; /* 指定缩放的原点在左上角 */ transform-origin: left top; } ul { width: 100%; height: 100%; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; } li { width: 33.333%; height: 50%; box-sizing: border-box; border: 2px solid green; font-size: 30px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <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> </body></html>三种适配放案对比
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 等
少用渐变和高斯模糊，当不需要动画时，及时关闭动画。