Comment adapter le projet Vite à l'écran ? Deux options à partager

Comment adapter le projet Vite à l'écran ? L'article suivant partagera avec vous deux solutions d'adaptation à l'écran du projet Vite. Il est très détaillé. Venez le récupérer et apprenez !

Récemment, Xiaomei, une étudiante de l'équipe du projet, semble avoir rencontré un problème difficile, et elle a toujours l'air déprimée.

Avec l'intention que nous sommes tous une équipe de projet et que nous devrions nous entraider et résoudre les problèmes ensemble, j'ai envoyé un message à Xiaomei.

Moi : « Je vois que vous n'avez pas été très heureux ces derniers temps, avez-vous rencontré des problèmes ? »

Xiaomei : « J'ai récemment vérifié les informations sur l'adaptation à l'écran du projet vue3 et j'ai constaté que les informations en ligne sont tous liés à vue2+webpack Vous ne savez pas comment vous adapter au projet Vite ? [Recommandations associées : tutoriel vidéo vuejs]

Moi : "OK, laisse faire mon frère, je vais t'aider à régler ça !"

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

I pensez que l'article est bon, ou il peut être utile pour votre propre développement. Bienvenue pour l'aimer et le collectionner ! ❤❤❤

Solution d'adaptation basée sur le Rem

Qu'est-ce que le rem ?

rem fait référence à l'unité de taille de police par rapport à l'élément racine. Dans le processus de développement quotidien, nous définissons généralement la police de l'élément racine (html/body) sur 10 px, ce qui nous permet de calculer facilement (à ce stade). temps, 1rem de l'élément enfant équivaut à 10px).

Scénarios applicables

Applications Web sans rapport hauteur/largeur fixe, adaptées à la plupart des scénarios commerciaux

Combat réel du projet

1. Dépendances d'installation

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

postcss-pxtorem est un plug-in pour. PostCSS , utilisé pour générer des unités de pixels en unités rem
plug-in de traitement des préfixes de navigateur avec préfixe automatique
amfe-flexible La solution de mise en page évolutive remplace l'original lib-flexible et utilise la viewport compatible avec de nombreux navigateurs actuels 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="Comment adapter le projet Vite à l'écran ? Deux options à partager" >
        </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. Créez le fichier postcss.config.js dans le répertoire racine du projet

rrreee3. Importer les dépendances dans le main.ts/js filerrreee

4. Redémarrage du projet🎜

🎜Solution d'adaptation basée sur l'échelle🎜🎜🎜En CSS3, nous pouvons utiliser la méthode scale() de l'attribut transform pour réaliser la mise à l'échelle. effet des éléments. Zoom fait référence à la signification de « zoom arrière » et « zoom avant ». 🎜

• transform : scaleX(x); / Échelle dans la direction de l'axe x/
• transform : scaleY(y) / Échelle dans la direction de l'axe y/
• transform : scale(); / Mettre à l'échelle simultanément les axes x et y/

🎜Scénarios applicables🎜🎜🎜Applications Web avec un format d'image fixe, comme une application professionnelle à grand écran ou à fenêtre fixe🎜🎜🎜

🎜Projet de combat réel🎜🎜🎜1. Créez un nouveau fichier resize.ts/js🎜 🎜🎜rrreee🎜2 . Introduction à l'interface pertinente resize.ts /js🎜🎜🎜rrreee

Écrit à la fin🎜🎜Recommandez les projets open source auxquels ont participé deux auteurs. Si le projet vous est utile, bienvenue dans la star ! 🎜🎜Un simple projet de gestion backend basé sur la pile technologique Vue3, TS, Vite et qiankun : www.xkxk.tech🎜🎜🎜A basé sur Vue3 , le Cool big screen project de Vite : 🎜screen.xkxk.tech🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end🎜, 🎜Vidéo de programmation de base🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!