前言
最近项目组小美同学貌似遇到了一个扎手的问题,总是一副郁郁寡欢的姿态。
本着都是一个项目组,应该互相协助、共用解决问题的意图,我向小美发出了信息。
我:“看你最近一向不怎么开心,遇到什么问题了吗?”
小美:“最近一向在查阅vue3项目屏幕适配的材料,发现网上材料都是vue2+webpack有关的,不知道如何适配vite项目?o(╥﹏╥)o”
我:“OK,交给哥了,我来帮你摆平!”
小美:“❤( ・ᴗ・` )❤”
觉得文章不错、或对自己开发有所协助,欢迎点赞保藏!❤❤❤
根据rem的适配计划
rem是什么?
rem是指相对于根元素的字体大小的单位,在日常开发过程中咱们一般把根元素(html/body)的字体设置为10px,便利于咱们核算(此刻子元素的1rem就相当于10px)。
适用场景
不固定宽高比的Web运用,适用于绝大部分事务场景
项目实战
- 装置依靠
npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev
postcss-pxtorem 是PostCSS的插件,用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可弹性布局计划 代替了原先的lib-flexible
选用了当前众多浏览器兼容的viewport
- 项目根目录创建
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转换
},
},
};
-
main.ts/js
文件中导入依靠
import "amfe-flexible/index.js";
- 项目重启
根据scale的适配计划
在CSS3中,咱们可以运用transform属性的scale()方法来完成元素的缩放作用。缩放,指的是“缩小”和“扩大”的意思。
- transform: scaleX(x); / 沿x轴方向缩放/
- transform: scaleY(y); / 沿y轴方向缩放/
- transform: scale(); / 一起沿x轴和y轴缩放/
适用场景
固定宽高比的Web运用,如大屏或者固定窗口事务运用
项目实战
- 新建
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,
};
}
- 相关界面引入
resize.ts/js
<template>
<div class="screen-container">
<div class="screen-content" ref="screenRef">
<span class="screen-title">根据scale的适配计划</span>
<img class="screen-img" src="https://img2.baidu.com/it/u=1297807229,3828610143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
</div>
</div>
</template>
<script setup lang="ts">
import windowResize from '../../utils/resize';
import {onMounted, onUnmounted} from 'vue';
const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize()
onMounted(() => {
// 监听浏览器窗口尺度改变
windowDraw()
calcRate()
})
onUnmounted(() => {
unWindowDraw();
})
</script>
<style lang="scss" scoped>
.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的炫酷大屏项目
:screen.xkxk.tech