Heim > Artikel > Web-Frontend > Wie passt man das Vite-Projekt an den Bildschirm an? Zwei Optionen zum Teilen
Wie passt man das Vite-Projekt an den Bildschirm an? Der folgende Artikel stellt Ihnen zwei Lösungen für die Bildschirmanpassung des Vite-Projekts vor. Kommen Sie und sammeln Sie es!
Vor Kurzem scheint Xiaomei, eine Studentin im Projektteam, auf ein schwieriges Problem gestoßen zu sein und sieht immer deprimiert aus.
Mit der Absicht, dass wir alle ein Projektteam sind und uns gegenseitig helfen und gemeinsam Probleme lösen sollen, habe ich eine Nachricht an Xiaomei geschickt.
Ich: „Wie ich sehe, warst du in letzter Zeit nicht sehr zufrieden. Sind bei dir irgendwelche Probleme aufgetreten?“
Xiaomei: „Ich habe kürzlich die Informationen zur Bildschirmanpassung des vue3-Projekts überprüft und festgestellt, dass die Online-Informationen alles im Zusammenhang mit vue2+webpack Sie wissen nicht, wie Sie sich an das Vite-Projekt anpassen sollen? [Verwandte Empfehlungen: vuejs Video-Tutorial]
Ich: „OK, überlass es deinem Bruder, ich helfe dir, es zu regeln!“
Xiaomei: „❤( ´･ᴗ･` )❤“
Ich Denken Sie, dass der Artikel gut ist, oder dass er für Ihre eigene Entwicklung hilfreich sein kann. Gerne können Sie ihn liken und sammeln. ❤❤❤
rem bezieht sich auf die Einheit der Schriftgröße relativ zum Stammelement. Im täglichen Entwicklungsprozess setzen wir normalerweise die Schriftart des Stammelements (HTML/Body) auf 10 Pixel, was für uns bequem zu berechnen ist (zu diesem Zeitpunkt). Zeit entspricht 1rem des untergeordneten Elements 10px).
Webanwendungen ohne festes Seitenverhältnis, geeignet für die meisten Geschäftsszenarien
1. Installationsabhängigkeiten
npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev
postcss-pxtorem ist ein Plug-in für PostCSS , wird zum Generieren von Pixeleinheiten in REM-Einheiten verwendet
Autoprefixer Browser-Präfixverarbeitungs-Plug-in
amfe-flexible Die skalierbare Layoutlösung ersetzt das ursprünglichelib-flexibleund verwendet denviewport, der mit kompatibel ist viele aktuelle Browserlib-flexible选用了当前众多浏览器兼容的viewport
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设计 此处就为192
propList: ["*", "!border"], // 除 border 外所有px 转 rem
selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
},
},
};
3、main.ts/js 文件中导入依赖
import "amfe-flexible/index.js";
4、项目重启
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。
固定宽高比的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
<template>
<div>
<div>
<span>基于scale的适配方案</span>
<img alt="Wie passt man das Vite-Projekt an den Bildschirm an? Zwei Optionen zum Teilen" >
</div>
</div>
</template>
<script>
import windowResize from '../../utils/resize';
import {onMounted, onUnmounted} from 'vue';
const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize()
onMounted(() => {
// 监听浏览器窗口尺寸变化
windowDraw()
calcRate()
})
onUnmounted(() => {
unWindowDraw();
})
</script>
<style>
.screen-container {
height: 100%;
background-color: lightcyan;
display: flex;
justify-content: center;
align-items: center;
.screen-content {
width: 1920px;
height: 1080px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.screen-title {
font-size: 32px;
}
.screen-img {
margin-top: 20px;
}
}
}
</style>
推荐两个作者参与的开源项目，如果项目有帮助到你，欢迎star！
一个简单的基于Vue3、TS、Vite、qiankun技术栈的后台管理项目：www.xkxk.tech
一个基于Vue3、Vite的炫酷大屏项目2. Erstellen Sie die Datei postcss.config.js im Projektstammverzeichnis
main.ts/js Dateirrreee
🎜resize.ts/js-Datei🎜 🎜
🎜rrreee🎜2 . Relevante Schnittstelleneinführung resize.ts /js🎜🎜🎜rrreeeBackend-Management-Projekt basierend auf Vue3, TS, Vite und Qiankun-Technologie-Stack: www.xkxk.tech🎜🎜🎜A basierend auf Vue3, Vites Cooles Großbildprojekt: 🎜screen.xkxk.tech🎜🎜🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Entwicklung🎜, 🎜Grundlegendes Programmiervideo🎜)🎜
Das obige ist der detaillierte Inhalt vonWie passt man das Vite-Projekt an den Bildschirm an? Zwei Optionen zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!