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-basierte Anpassungslösung

Was ist Rem?

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).

Anwendbare Szenarien

Webanwendungen ohne festes Seitenverhältnis, geeignet für die meisten Geschäftsszenarien

Projekt tatsächlicher Kampf

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üngliche lib-flexible und verwendet den viewport, der mit kompatibel ist viele aktuelle Browser lib-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、项目重启

基于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

<template>
    <div>
        <div>
            <span>基于scale的适配方案</span>
            <img  src="/static/imghw/default1.png" data-src="https://img2.baidu.com/it/u=1297807229,3828610143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" class="lazy" alt="Wie passt man das Vite-Projekt an den Bildschirm an? Zwei Optionen zum Teilen" >
        </div>
    </div>
</template>

<script>
import windowResize from &#39;../../utils/resize&#39;;
import {onMounted, onUnmounted} from &#39;vue&#39;;

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

rrreee3. Importieren Sie Abhängigkeiten im main.ts/js Dateirrreee

4. Projektneustart🎜

🎜Skalenbasierte Anpassungslösung🎜🎜🎜In CSS3 können wir die Scale()-Methode des Transformationsattributs verwenden, um die Skalierung zu erreichen Wirkung von Elementen. Zoom bezieht sich auf die Bedeutung von „herauszoomen“ und „vergrößern“. 🎜

• transform: scaleX(x); / Skalierung entlang der x-Achsenrichtung/
• transformation: scaleY(y); / Skalierung entlang der y-Achsenrichtung/
• transform : scale(); / Gleichzeitig entlang der x- und y-Achse skalieren/

🎜Anwendbare Szenarien🎜🎜🎜Webanwendungen mit festem Seitenverhältnis, z. B. Geschäftsanwendung mit großem Bildschirm oder festem Fenster🎜🎜🎜

🎜Projekt tatsächlicher Kampf🎜🎜🎜1. Erstellen Sie eine neue resize.ts/js-Datei🎜 🎜🎜rrreee🎜2 . Relevante Schnittstelleneinführung resize.ts /js🎜🎜🎜rrreee

Am Ende geschrieben🎜🎜Empfehlen Sie Open-Source-Projekte, an denen zwei Autoren beteiligt waren. Wenn das Projekt für Sie hilfreich ist, Willkommen bei Star! 🎜🎜Ein einfaches Backend-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!