vite框架下大屏适配方案的几种实现方法
更新时间：2025年10月30日 11:35:10 作者：李剑一
本文主要介绍了vite框架下大屏适配方案小结,包括相对单位适配、媒体查询适配和缩放适配,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前情
最近打算写几个大屏，作为后续工作的一个简历吧。毕竟现在技术类的找工作不单单的是得会忽悠，还得有点儿作品。
怎么好像在说UI岗一样，在网上扒了扒效果，想要写的炫酷一些，页面开发完了以后在公司给一哥们演示的时候拉跨了。
家里的电脑屏幕本身是2K的，而公司里的是普通的1080p的。
原本在家里适配的非常好的页面在公司非常别扭，而且大量的宽度、高度、字体因为是写死的，在1080p的屏幕上出现了换行。
唉，百密一疏啊！页面效果、动画展示、数据加载等等都考虑到了，就是没考虑屏幕兼容...
方案选择
紧急调研了一下，现在比较主流的兼容方案一般有以下几种：
- 相对单位适配：
- 使用相对单位如vw、vh、vmin、vmax，这些单位会根据屏幕的宽度和高度进行适配，从而实现不同屏幕下的适配。
- 但是问题在于这种情况下可能出现小屏幕拥挤、大屏幕空旷的问题。
- 媒体查询适配：
- 通过媒体查询（@media）来实现不同屏幕下的适配。各种屏幕都考虑到了，并且针对性的进行优化，能够保证效果相对来说处于最佳。
- 但是问题在于，如果要兼容的屏幕很多，那么代码就会很复杂，并且容易出错。
- 缩放适配
- 通过使用transform: scale() 来实现不同屏幕下的适配。简单快捷，几乎不用额外的考虑极端情况。
- 但是问题在于，缩放后的页面可能不太好看。尤其是特殊屏幕可能会出现大黑边的情况。
层层筛选还是打断用相对单位做，但是可以使用 less 函数来简化这个过程。
简单地说就是使用 less 函数让他在编译过程中自动的将 px 转化为 vw/vh，实现相对比较完美的显示效果。
代码开发
- 首先安装 less
npm i less --save-dev
- 创建一个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;
}
- 在vite中使用
preprocessorOptions为每个less插入工具函数
export default defineConfig({
css: {
preprocessorOptions: {
less: {
additionalData: `@import "@/assets/css/utils.less";`
}
}
}
})
- 在
vue中使用
<style scope lang='less'>
.card {
.px2vw(width, 400);
.px2vh(height, 300);
}
</style>
总结
非常简单的一个小方案，但是却实现了相当不错的效果。适配上来说也还算比较的好吧，但是肯定是不如媒体查询那么完美。
不过从实现上来说比媒体查询的难度下降了不是一个量级。
最大的难度或许来自于你在 css 中写 .px2vw(width, 200) 这种别扭的感觉。
到此这篇关于vite框架下大屏适配方案小结的文章就介绍到这了,更多相关vite 大屏适配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue的配置项'vue.config.js'是用来配置Vue项目的构建配置的,它是一个可选的配置文件,放置在项目的根目录下,这篇文章主要给大家介绍了关于vue配置vue.config.js的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue中component标签解决项目组件化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Electron中打包应用程序及相关报错问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Element UI Upload 组件上传图片可删除、预览功能
这篇文章主要介绍了Element UI Upload 组件 上传图片可删除、预览，设置只允许上传单张 / 多张图片的操作,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-11-11
解决报错ValidationError: Progress Plugin Invalid&
这篇文章主要介绍了解决报错ValidationError: Progress Plugin Invalid Options问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue3.0父传给子的值不随父组件改变而改变问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了electron踩坑之dialog中的callback解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了关于element ui中el-cascader的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Teleport是Vue3内置的核心组件,核心作用是将组件的部分模板渲染到 DOM 树的指定位置,但组件的逻辑关系(如父子通信、生命周期、响应式)完全不受影响,这篇文章主要介绍了Vue3 Teleport在打包后失效的深层原因与解决方案,需要的朋友可以参考下2026-03-03
这篇文章主要介绍了vue点击项目唯一id生成器nanoid的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论