Bagaimana untuk menyesuaikan projek Vite ke skrin? Dua pilihan untuk dikongsi

Bagaimana untuk menyesuaikan projek Vite ke skrin? Artikel berikut akan berkongsi dengan anda dua penyelesaian untuk penyesuaian skrin projek Vite Ia sangat terperinci.

Baru-baru ini, Xiaomei, seorang pelajar dalam pasukan projek, nampaknya menghadapi masalah yang sukar, dan dia sentiasa kelihatan tertekan.

Dengan niat bahawa kita semua adalah pasukan projek dan harus membantu antara satu sama lain dan menyelesaikan masalah bersama-sama, saya menghantar mesej kepada Xiaomei.

Saya: "Saya lihat anda tidak begitu gembira sejak kebelakangan ini. Adakah anda menghadapi sebarang masalah?" dan menemui maklumat dalam talian Semuanya berkaitan dengan vue2 webpack. Saya tidak tahu cara menyesuaikannya dengan projek vite o(╥﹏╥)o? [Cadangan berkaitan:

tutorial video vuejs

]Saya: "Baiklah, serahkan pada abang, saya akan tolong kamu selesaikan

Xiaomei: "❤( ´ ･ᴗ･` )❤”

Jika anda rasa artikel itu bagus atau membantu perkembangan anda sendiri, sila like dan kumpulkan! ❤❤❤

penyelesaian penyesuaian berasaskan rem

Apakah rem?

rem merujuk kepada unit saiz fon berbanding elemen akar Dalam proses pembangunan harian, kami biasanya menetapkan fon elemen akar (html/body) kepada 10px, yang sesuai untuk. kita untuk mengira (pada masa ini 1rem elemen kanak-kanak adalah bersamaan dengan 10px).

Senario yang berkenaan

Aplikasi web tanpa nisbah bidang tetap, sesuai untuk kebanyakan senario perniagaan

Pertempuran sebenar projek

1. Kebergantungan pemasangan

npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

postcss-pxtorem ialah pemalam untuk PostCSS, digunakan untuk menjana unit rem daripada unit piksel

Pemalam pemprosesan awalan penyemak imbas autoprefixer

penyelesaian susun atur berskala amfe-flexible menggantikan
asal dan menggunakan
lib-flexibleviewport

yang serasi pada masa ini 2. Cipta direktori akar projek

Fail

postcss.config.js

3 Import dependensi dalam

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转换
		},
	},
};

fail

main.ts/js

4 🎜>

import "amfe-flexible/index.js";

Skim penyesuaian berasaskan skala

Dalam CSS3, kita boleh menggunakan kaedah skala() atribut transformasi untuk mencapai kesan penskalaan elemen. Zum merujuk kepada maksud "zum keluar" dan "zum masuk".

transformasi: skalaX(x); / Skala sepanjang arah paksi-x/

ubah: skalaY(y); / Skala sepanjang arah paksi-y/

• transform : scale(); / Skala sepanjang paksi-x dan paksi-y secara serentak/
• Senario yang boleh digunakan

Aplikasi web dengan aspek tetap nisbah, seperti skrin besar atau aplikasi perniagaan tetingkap tetap

Amalan projek

1 Cipta fail baharu 🎜>

resize.ts/js

2 Pengenalan antara muka yang berkaitan

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,
	};
}

resize.ts/js

Ditulis pada penghujung

Syorkan projek sumber terbuka yang melibatkan dua pengarang Projek, jika projek itu membantu anda, selamat datang ke bintang!

<template>
    <div>
        <div>
            <span>基于scale的适配方案</span>
            <img  alt="Bagaimana untuk menyesuaikan projek Vite ke skrin? Dua pilihan untuk dikongsi" >
        </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>

Yang ringkas berdasarkan susunan teknologi Vue3, TS, Vite, qiankun

:

www.xkxk.tech

Yang ringkas berdasarkan Vue3, Vite后台管理项目 : screen.xkxk.tech

(Belajar perkongsian video: 炫酷大屏项目pembangunan bahagian hadapan web, Video pengaturcaraan asas

)

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan projek Vite ke skrin? Dua pilihan untuk dikongsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!