记一次大屏适配踩坑

常用的大屏适配方案有两种，还有一种由于浏览器的兼容问题非必要不采用，简单的讲讲常用的两种方案，一种是px->rem,一种是css3的scale。以及一种不常用的zoom。

px->rem

webpack和vite都有专门的转换插件posspxtorem我就不过多的记录了，主要记得三点

1. font-size小于12px时转换按照12px转换;
2. 对style里面的px不进行转换，从而引起下列第三点antd :where()是写在style里的;
3. 在vue做响应式布局不建议搭配ant-design框架，因为适配难度比较复杂需要重写ui框架中:where()里带px的样式，暂时没研究react搭配ant-design 估计在antd5.x版本前也是一样的;

css3缩放

使用缩放加平移通过计算实现指定屏幕的缩放,如果只是适配标准大屏的时候推荐使用这种方案，这种是代码改动量最小的一种。

zoom属性

存在浏览器兼容性的问题，在火狐浏览器存在很明显的问题，非必要不使用，具体在在部分特殊拖拽中，echarts图表，地图中存在问题点位偏移问题

const calculateCssZoom = () => {

    const viewportHeight: number =

      document.documentElement.clientHeight || document.body.clientHeight; // 实际浏览器视口的高度

    const viewportWidth: number = document.documentElement.clientWidth || document.body.clientWidth; // 实际浏览器视口的宽度

    const designHeight: number = 1080; // 设计稿的高度

    const designWidth: number = 1920; // 设计稿的宽度

    const zoomValueHeight = viewportHeight / designHeight; // 高度计算出来的zoom值

    const zoomValueWidth = viewportWidth / designWidth; // 宽度计算出来的zoom值

    const targetZoom = zoomValueWidth > zoomValueHeight ? zoomValueHeight : zoomValueWidth; // 比较大小选择最终实际需要的zoom值


    document.getElementsByTagName('body')[0].style.zoom = targetZoom;

  };