ホームページ > 記事 > ウェブフロントエンド > Vite プロジェクトを画面に適応させるにはどうすればよいですか?共有する 2 つのオプション
Vite プロジェクトを画面に適応させるにはどうすればよいですか?次の記事では、Vite プロジェクトを画面に適応させるための 2 つのソリューションを紹介します。非常に詳しく説明されています。ぜひ収集して学習してください。
最近、プロジェクト チームの学生であるシャオメイは、難しい問題に遭遇したようで、いつも落ち込んでいます。
私たちは皆プロジェクトチームであり、お互いに助け合って一緒に問題を解決していきたいという思いを込めて、シャオメイさんにメッセージを送りました。
私:「最近あまりご機嫌が良くないようですね。何か問題はありましたか?」
シャオメイ:「vue3 プロジェクトの画面適応に関する情報を確認しています。」 「最近オンライン情報を見つけました。すべて vue2 Webpack に関連しています。vite プロジェクトにどう適応すればよいかわかりません。o(╥﹏╥)o」 [関連する推奨事項: vuejs ビデオ チュートリアル ]
私:「わかりました、お兄さんに任せてください。解決をお手伝いします!」
シャオメイ:「❤( ´ ･ᴗ･` )❤”
この記事が良いと思ったり、自分の成長に役立つと思ったら、ぜひ「いいね！」をして集めてください！ ❤❤❤
rem は、ルート要素に対する相対的なフォント サイズの単位を指します。日常の開発プロセスでは、通常、ルート要素 (html/body) のフォントを 10px に設定します。 (このとき、子要素の 1rem は 10px に相当します)。
npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev
postcss-pxtorem は PostCSS のプラグインで、ピクセル単位からレム単位を生成するために使用されますpostcss.config.jsautoprefixerブラウザ プレフィックス処理プラグイン
## を使用します。 #2. プロジェクトのルート ディレクトリ
amfe-flexible スケーラブル レイアウト ソリューションは、元の
lib-flexibleを置き換え、互換性のあるviewport
ファイル
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转换
},
},
};
依存関係をファイルにインポートします<pre class="brush:php;toolbar:false">import "amfe-flexible/index.js";</pre>4. プロジェクトを再起動します
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="Vite プロジェクトを画面に適応させるにはどうすればよいですか?共有する 2 つのオプション" >
</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>
最後に書いてください
バックエンド管理プロジェクト
:www.xkxk.techシンプルなプロジェクト ベースVue3 、Vite の クールな大画面プロジェクト
screen.xkxk.tech (学習ビデオ共有: Web フロントエンド開発
プログラミングの基礎ビデオ )
以上がVite プロジェクトを画面に適応させるにはどうすればよいですか?共有する 2 つのオプションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。