Vite项目中实现屏幕适配的方法及代码是什么-群英

您现在的位置是：群英 > 开发技术 > web开发

Vite项目中实现屏幕适配的方法及代码是什么

Admin发表于 2022-10-09 11:21:49639 次浏览

上一篇： PHP中数组替换函数有哪些，用法是什么

下一篇： SpringBoot接口数据的加解密应该怎么处理

这篇文章主要为大家详细介绍了Vite项目中实现屏幕适配的方法及代码是什么的内容，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助，接下来就跟随小编一起来学习吧。

基于rem的适配方案

rem是什么？

rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。

适用场景

不固定宽高比的Web应用，适用于绝大部分业务场景

项目实战

1、安装依赖

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

postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
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 文件中导入依赖

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

      基于scale的适配方案

写在最后

推荐两个作者参与的开源项目，如果项目有帮助到你，欢迎star！

一个简单的基于Vue3、TS、Vite、qiankun技术栈的后台管理项目：www.xkxk.tech

一个基于Vue3、Vite的炫酷大屏项目：screen.xkxk.tech

感谢各位的阅读，以上就是“Vite项目中实现屏幕适配的方法及代码是什么”的内容了，通过以上内容的阐述，相信大家对Vite项目中实现屏幕适配的方法及代码是什么已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： vite屏幕适配

上一篇： PHP中数组替换函数有哪些，用法是什么

下一篇： SpringBoot接口数据的加解密应该怎么处理