vite框架下大屏适配方案

前情

最近打算写几个大屏，作为后续工作的一个简历吧。毕竟现在技术类的找工作不单单的是得会忽悠，还得有点儿作品。

怎么好像在说UI岗一样，在网上扒了扒效果，想要写的炫酷一些，页面开发完了以后在公司给一哥们演示的时候拉跨了。

家里的电脑屏幕本身是2K的，而公司里的是普通的1080p的。

原本在家里适配的非常好的页面在公司非常别扭，而且大量的宽度、高度、字体因为是写死的，在1080p的屏幕上出现了换行。

唉，百密一疏啊！页面效果、动画展示、数据加载等等都考虑到了，就是没考虑屏幕兼容...

方案选择

紧急调研了一下，现在比较主流的兼容方案一般有以下几种：

1. 相对单位适配：

• 使用相对单位如vw、vh、vmin、vmax，这些单位会根据屏幕的宽度和高度进行适配，从而实现不同屏幕下的适配。
• 但是问题在于这种情况下可能出现小屏幕拥挤、大屏幕空旷的问题。

2. 媒体查询适配：

• 通过媒体查询（@media）来实现不同屏幕下的适配。各种屏幕都考虑到了，并且针对性的进行优化，能够保证效果相对来说处于最佳。
• 但是问题在于，如果要兼容的屏幕很多，那么代码就会很复杂，并且容易出错。

3. 缩放适配

• 通过使用transform: scale() 来实现不同屏幕下的适配。简单快捷，几乎不用额外的考虑极端情况。
• 但是问题在于，缩放后的页面可能不太好看。尤其是特殊屏幕可能会出现大黑边的情况。

层层筛选还是打断用相对单位做，但是可以使用 less 函数来简化这个过程。

简单地说就是使用 less 函数让他在编译过程中自动的将 px 转化为 vw/vh，实现相对比较完美的显示效果。

代码开发

1. 首先安装 less

npm i less --save-dev

2. 创建一个util.less作为工具函数

@charset "utf-8";

// 默认设计稿的宽度
@designWidth: 1920;

// 默认设计稿的高度
@designHeight: 1080;

// px 转 vw
.px2vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}

// px 转 vh
.px2vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}

3. 在vite中使用 preprocessorOptions 为每个less插入工具函数

export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                additionalData: `@import "@/assets/css/utils.less";`
            }
        }
    }
})

4. 在 vue 中使用

<style scope lang='less'>
    .card {
        .px2vw(width, 400);
        .px2vh(height, 300);
    }
</style>

总结

非常简单的一个小方案，但是却实现了相当不错的效果。适配上来说也还算比较的好吧，但是肯定是不如媒体查询那么完美。

不过从实现上来说比媒体查询的难度下降了不是一个量级。

最大的难度或许来自于你在 css 中写 .px2vw(width, 200) 这种别扭的感觉。