Vite项目中实现屏幕适配的方法及代码是什么
导读：这篇文章主要为大家详细介绍了Vite项目中实现屏幕适配的方法及代码是什么的内容，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助，接下来就跟随小编一起来学习吧。...
这篇文章主要为大家详细介绍了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项目中实现屏幕适配的方法及代码是什么已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vite项目中实现屏幕适配的方法及代码是什么
本文地址： https://pptw.com/jishu/652594.html