>首页> IT >

【当前独家】Vite项目怎么进行屏幕适配?两种方案分享

时间:2022-09-30 17:51:25       来源:转载
Vite项目怎么进行屏幕适配?下面本篇文章给大家分享Vite项目屏幕适配的两种方案,超详细呦,快来收藏学习吧!


(资料图片)

最近项目组小美同学貌似遇到了一个棘手的问题,总是一副闷闷不乐的样子。

本着都是一个项目组,应该互相帮助、共用解决问题的用意,我向小美发出了信息。

我:“看你最近一直不怎么开心,遇到什么问题了吗?”

小美:“最近一直在查阅vue3项目屏幕适配的资料,发现网上资料都是vue2+webpack有关的,不知道如何适配vite项目?o(╥﹏╥)o”。【相关推荐:vuejs视频教程】

我:“OK,交给哥了,我来帮你摆平!”

小美:“❤( ´・ᴗ・` )❤”

基于rem的适配方案

rem是什么?

rem是指相对于根元素的字体大小的单位,在日常开发过程中我们通常把根元素(html/body)的字体设置为10px,方便于我们计算(此时子元素的1rem就相当于10px)。

适用场景

不固定宽高比的Web应用,适用于绝大部分业务场景

项目实战

1、安装依赖

npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev
登录后复制

2、项目根目录创建 postcss.config.js文件

module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome >31","ff >31","ie >= 8","last 10 versions", // 所有主流浏览器最近10版本用],grid: true,},"postcss-pxtorem": {rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192propList: ["*", "!border"], // 除 border 外所有px 转 remselectorBlackList: [".el-"], // 过滤掉.el-开头的class,不进行rem转换},},};
登录后复制

3、main.ts/js文件中导入依赖

import "amfe-flexible/index.js";
登录后复制

4、项目重启

基于scale的适配方案

在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。

transform: scaleX(x); / 沿x轴方向缩放/transform: scaleY(y); / 沿y轴方向缩放/transform: scale(); / 同时沿x轴和y轴缩放/

适用场景

固定宽高比的Web应用,如大屏或者固定窗口业务应用

项目实战

1、新建resize.ts/js文件

import { ref } from "vue";export default function windowResize() {// * 指向最外层容器const screenRef = ref();// * 定时函数const timer = ref(0);// * 默认缩放值const scale = {width: "1",height: "1",};    // * 设计稿尺寸(px)const baseWidth = 1920;const baseHeight = 1080;// * 需保持的比例(默认1.77778)const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));const calcRate = () =>{// 当前宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));if (screenRef.value) {if (currentRate >baseProportion) {// 表示更宽scale.width = ((window.innerHeight * baseProportion) /baseWidth).toFixed(5);scale.height = (window.innerHeight / baseHeight).toFixed(5);screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;} else {// 表示更高scale.height = (window.innerWidth /baseProportion /baseHeight).toFixed(5);scale.width = (window.innerWidth / baseWidth).toFixed(5);screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;}}};const resize = () =>{clearTimeout(timer.value);timer.value = window.setTimeout(() =>{calcRate();}, 200);};// 改变窗口大小重新绘制const windowDraw = () =>{window.addEventListener("resize", resize);};// 改变窗口大小重新绘制const unWindowDraw = () =>{window.removeEventListener("resize", resize);};return {screenRef,calcRate,windowDraw,unWindowDraw,};}
登录后复制

2、相关界面引入resize.ts/js

登录后复制

写在最后

推荐两个作者参与的开源项目,如果项目有帮助到你,欢迎star!

一个简单的基于Vue3、TS、Vite、qiankun技术栈的后台管理项目:www.xkxk.tech

一个基于Vue3、Vite的炫酷大屏项目:screen.xkxk.tech

(学习视频分享:web前端开发、编程基础视频)

以上就是Vite项目怎么进行屏幕适配?两种方案分享的详细内容,更多请关注php中文网其它相关文章!

关键词: 窗口大小 相关文章 写在最后