大屏自适应方案

上次更新 2024年9月26日星期四 9:36:56 字数 0 字 时长 0 分钟

rem

postcsstoRem

• 将所有的 px 单位转成 rem
• 设置 root 字体大小
• 设置忽略的类名 比如 border 等
• 行内样式无法处理（需要 js 实现动态获取 替换 sass function）

实现

• 可以采用 postcsstoRem

• sass function 实现

  $root-font-size:16px;
  pxToRem($px){
      #{$px/$root-font-size}rem
  }

vw vh

用的不多

原理

• px vh （vw）
• 思路同上

scale

个人不是很推荐

视频窗口的等比例缩放方案

原理

• 采用 transform css 属性

• 传入原始（默认）尺寸 ，监听事件 计算缩放比例，将内容缩放（取最小缩放比例） 平移

• 或者 达到同样的效果 可以使用 vh（vw）aspect-ratio 属性

存在问题

• 可能存在 鼠标点击位置偏移 （动态计算 即使动态计算 计算结果比例小数层级过深 导致浏览器渲染计算偏移）

• canvas 都要做缩放系数的处理 非常复杂（没处理过）