前端大屏自适应踩过的坑

我们公司项目比较繁杂，但是最主要的还是大屏项目，由于这是定制项目，大屏尺寸固定，所以最初都是直接固定了分辨率的写法，后来在给其他用户展示的时候才发现这种做法犯了一个致命的错误。因为每个人的电脑分辨率不一样，所以可以想到当其他用户打开这个大屏的时候看到的效果。因此目前需要将所有的大屏项目做自适应处理，在翻阅了众多资料以及根据自己的理解，不管屏幕的分辨率怎么变，屏幕的宽度始终是100vw，高度始终是100vh。所以，我们将设计稿的宽高换算成vw和vh这种单位就可以了，但是考虑到每个元素都需要换算，所以我们不可能一个一个的去换算，这样太复杂，那我们就需要自己封装一个方法，到我们需要换算的时候，直接调用这个方法就可以了。
而sass中有一个math方法能给我们的封装提供帮助，而且要在样式文件中调用方法，也需要用到变量，综合考虑，最终选择了sass这种预编译工具。而在安装node-sass和sass-loader的过程就比较坎坷了，用过的人都知道，node-sass和sass-loader会存在版本冲突，我的node版本是16.12.0的，也是在经过多次试探之后，成功安装node-sass版本6.0.1，而sass-loader的版本为10.2.0，至此，在做自适应的路上终于迈出了一大步。接下来就是封装自适应处理的方法：
![在这里插入图片描述](https://img-blog.csdnimg.cn/737ab604294548709abeda4d14c199a0.png)

当然这个方法我们需要单独写在一个scss文件中，而我们想在所有的组件中使用这个方法，那我们就需要将这个文件进行全局配置，因此，我们需要在vue.config.js文件中对这个封装