Maison > Article > interface Web > 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 ! ❤❤❤
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).
Applications Web sans rapport hauteur/largeur fixe, adaptées à la plupart des scénarios commerciaux
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'originallib-flexibleet utilise laviewport compatible avec de nombreux navigateurs actuelslib-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、项目重启
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。
固定宽高比的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 alt="Comment adapter le projet Vite à l'écran ? Deux options à partager" >
</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>
推荐两个作者参与的开源项目，如果项目有帮助到你，欢迎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
main.ts/js filerrreee
🎜resize.ts/js🎜 🎜
🎜rrreee🎜2 . Introduction à l'interface pertinente resize.ts /js🎜🎜🎜rrreeeprojet 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!