您现在的位置是：首页 > 技术教程 正文

【前端可视化】前端大屏适配方案

admin 阅读： 2024-03-31
后台-插件-广告管理-内容页头部广告（手机）

方案一：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 代码参考

  1. (function flexible(window, document) {
  2. var docEl = document.documentElement;
  3. var dpr = window.devicePixelRatio || 1;
  5. // adjust body font size
  6. function setBodyFontSize() {
  7. if (document.body) {
  8. // body 字体大小默认为 16px
  9. document.body.style.fontSize = 16 * dpr + 'px';
  10. } else {
  11. document.addEventListener('DOMContentLoaded', setBodyFontSize);
  12. }
  13. }
  14. setBodyFontSize();
  16. // 这里默认平均分成 10 等分(适用移动端)
  17. // set 1rem = viewWidth / 24 ；(使用pc端)
  18. function setRemUnit() {
  19. var rem = docEl.clientWidth / 24; // 1920 / 24 = 80
  20. docEl.style.fontSize = rem + 'px'; // 设置 html字体的大小 80px
  21. }
  23. setRemUnit();
  25. // reset rem unit on page resize
  26. window.addEventListener('resize', setRemUnit);
  27. window.addEventListener('pageshow', function (e) {
  28. if (e.persisted) {
  29. setRemUnit();
  30. }
  31. });
  33. // detect 0.5px supports
  34. if (dpr >= 2) {
  35. var fakeBody = document.createElement('body');
  36. var testElement = document.createElement('div');
  37. testElement.style.border = '.5px solid transparent';
  38. fakeBody.appendChild(testElement);
  39. docEl.appendChild(fakeBody);
  40. if (testElement.offsetHeight === 1) {
  41. docEl.classList.add('hairlines');
  42. }
  43. docEl.removeChild(fakeBody);
  44. }
  45. })(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. html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Documenttitle>
  8. <style>
  9. body,
  10. ul {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. body {
  15. width: 1920px;
  16. height: 1080px;
  17. box-sizing: border-box;
  18. border: 3px solid red;
  20. /* 指定缩放的原点在左上角 */
  21. transform-origin: left top;
  22. }
  24. ul {
  25. width: 100%;
  26. height: 100%;
  27. list-style: none;
  29. display: flex;
  30. flex-direction: row;
  31. flex-wrap: wrap;
  32. }
  34. li {
  35. width: 33.333%;
  36. height: 50%;
  37. box-sizing: border-box;
  38. border: 2px solid green;
  39. font-size: 30px;
  40. }
  41. style>
  42. head>
  43. <body>
  44. <ul>
  45. <li>1li>
  46. <li>2li>
  47. <li>3li>
  48. <li>4li>
  49. <li>5li>
  50. <li>6li>
  51. ul>
  53. <script>
  54. // 设计稿: 1920 * 1080
  55. // 目标适配: 1920 * 1080 3840 * 2160 ( 2 * 2 ) ; 7680 * 2160( 4 * 2)
  57. // 1.设计稿的尺寸
  58. let targetX = 1920;
  59. // let targetY = 1080
  60. // let targetRatio = 16 / 9 // 宽高比率
  62. // 2.拿到当前设备(浏览器)的宽度
  63. let currentX = document.documentElement.clientWidth || document.body.clientWidth;
  64. // 1920 * 1080 -> 3840 * 2160
  66. // 3.计算缩放比例 (当前设备的宽度 / 设计稿的宽度)
  67. let scaleRatio = currentX / targetX; // 参照宽度进行缩放
  69. // 4.开始缩放网页 (缩放的原点在左上角)
  70. document.body.style = `transform: scale(${scaleRatio})`;
  71. script>
  72. body>
  73. html>

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

  1. html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Documenttitle>
  8. <style>
  9. body,
  10. ul {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. body {
  15. position: relative;
  16. width: 1920px;
  17. height: 1080px;
  18. box-sizing: border-box;
  19. border: 3px solid red;
  21. /* 指定缩放的原点在左上角 */
  22. transform-origin: left top;
  23. }
  25. ul {
  26. width: 100%;
  27. height: 100%;
  28. list-style: none;
  30. display: flex;
  31. flex-direction: row;
  32. flex-wrap: wrap;
  33. }
  35. li {
  36. width: 33.333%;
  37. height: 50%;
  38. box-sizing: border-box;
  39. border: 2px solid green;
  40. font-size: 30px;
  41. }
  42. style>
  43. head>
  44. <body>
  45. <ul>
  46. <li>1li>
  47. <li>2li>
  48. <li>3li>
  49. <li>4li>
  50. <li>5li>
  51. <li>6li>
  52. ul>
  54. <script>
  55. // 设计稿: 1920 * 1080
  56. // 目标适配: 1920 * 1080 3840 * 2160 ( 2 * 2 ) ; 7680 * 2160( 4 * 2)
  58. // 1.设计稿的尺寸
  59. let targetX = 1920;
  60. let targetY = 1080;
  61. let targetRatio = 16 / 9; // 宽高比率
  63. // 2.拿到当前设备(浏览器)的宽度
  64. let currentX = document.documentElement.clientWidth || document.body.clientWidth;
  65. let currentY = document.documentElement.clientHeight || document.body.clientHeight;
  66. // 1920 * 1080 -> 3840 * 2160
  68. // 3.计算缩放比例
  69. let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
  70. let currentRatio = currentX / currentY; // 宽高比率
  72. // 超宽屏
  73. if (currentRatio > targetRatio) {
  74. // 如果当前设备的宽高比率大于设计稿的宽高比率,那么就以高度为参照进行缩放，并且居中显示
  75. scaleRatio = currentY / targetY;
  76. document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`;
  77. } else {
  78. // 4.开始缩放网页
  79. document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`;
  80. }
  81. script>
  82. body>
  83. 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 等

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

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表