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) 这种别扭的感觉。

到此这篇关于vite框架下大屏适配方案小结的文章就介绍到这了,更多相关vite 大屏适配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论