Vite プロジェクトを画面に適応させるにはどうすればよいですか?共有する 2 つのオプション

Vite プロジェクトを画面に適応させるにはどうすればよいですか?次の記事では、Vite プロジェクトを画面に適応させるための 2 つのソリューションを紹介します。非常に詳しく説明されています。ぜひ収集して学習してください。

最近、プロジェクト チームの学生であるシャオメイは、難しい問題に遭遇したようで、いつも落ち込んでいます。

私たちは皆プロジェクトチームであり、お互いに助け合って一緒に問題を解決していきたいという思いを込めて、シャオメイさんにメッセージを送りました。

私:「最近あまりご機嫌が良くないようですね。何か問題はありましたか?」

シャオメイ:「vue3 プロジェクトの画面適応に関する情報を確認しています。」 「最近オンライン情報を見つけました。すべて vue2 Webpack に関連しています。vite プロジェクトにどう適応すればよいかわかりません。o(╥﹏╥)o」 [関連する推奨事項: vuejs ビデオ チュートリアル ]

私:「わかりました、お兄さんに任せてください。解決をお手伝いします!」

シャオメイ:「❤( ´ ･ᴗ･` )❤”

この記事が良いと思ったり、自分の成長に役立つと思ったら、ぜひ「いいね！」をして集めてください！ ❤❤❤

rem ベースの適応スキーム

rem とは何ですか?

rem は、ルート要素に対する相対的なフォント サイズの単位を指します。日常の開発プロセスでは、通常、ルート要素 (html/body) のフォントを 10px に設定します。 (このとき、子要素の 1rem は 10px に相当します)。

#適用可能なシナリオ

アスペクト比が固定されていない Web アプリケーション、ほとんどのビジネス シナリオに適しています

# #プロジェクトの実戦

#1. インストールの依存関係

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

postcss-pxtorem は PostCSS のプラグインで、ピクセル単位からレム単位を生成するために使用されます

autoprefixerブラウザ プレフィックス処理プラグイン
amfe-flexible スケーラブル レイアウト ソリューションは、元の
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

依存関係をファイルにインポートします<pre class="brush:php;toolbar:false">import &quot;amfe-flexible/index.js&quot;;</pre>4. プロジェクトを再起動します

スケールに基づく適応スキーム

CSS3 では、変換属性のscale()メソッドを使用して、要素のスケーリング効果を実現できます。 Zoomとは「ズームアウト」「ズームイン」という意味です。

transform:scaleX(x); / x 軸方向に沿ってスケール/

• transform:scaleY(y); / y 軸方向に沿ってスケール/
• transform :scale(); / x 軸と y 軸に沿って同時にスケール/

適用可能なシナリオ

アスペクトが固定された Web アプリケーション大画面や固定ウィンドウ ビジネス アプリケーションなどの比率

# プロジェクトの実践

1. 新しい resize を作成します。 ts/js

file

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/imghwm/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="Vite プロジェクトを画面に適応させるにはどうすればよいですか?共有する 2 つのオプション" >
        </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>

最後に書いてください

2 人の著者が参加するオープン ソース プロジェクトを推奨します。プロジェクトが役立つ場合は、スターを付けてください。

Vue3、TS、Vite、qiankun テクノロジー スタックに基づくシンプルな

バックエンド管理プロジェクト

:

www.xkxk.techシンプルなプロジェクト ベースVue3 、Vite の クールな大画面プロジェクト

:

screen.xkxk.tech (学習ビデオ共有: Web フロントエンド開発

、

プログラミングの基礎ビデオ )

以上がVite プロジェクトを画面に適応させるにはどうすればよいですか?共有する 2 つのオプションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。