首页 - 新闻 - Vite项目如何适配屏幕？分享两个解决方案

Vite项目如何适配屏幕？分享两个解决方案

2023-10-06 20:59

Vite项目如何适配屏幕？下面文章给大家分享两种Vite项目屏幕适配的解决方案。非常详细。快来收藏学习吧！

module.exports = { 插件：{ 自动前缀：{ 覆盖浏览器列表：[ “安卓4.1”， “iOS 7.1”， “铬> 31”， “ff > 31”， “即> = 8”， "last 10 versions", // 所有主流浏览器都使用最近 10 个版本 ], 网格：真实， }, “postcss-pxtorem”：{ rootValue：192，//设计稿宽度的1/10。比如设计稿是按照1920年设计的，这里是192 propList: ["*", "!border"], // 将除 border 之外的所有 px 转换为 rem selectorBlackList: [".el-"], // 过滤掉.el-开头的类，不进行rem转换 }, }, };

登录后，复制

3、main.ts/js并将依赖导入到文件

import "amfe-flexible/index.js";

登录后复制

4.重新启动项目

基于尺度的适配方案

在CSS3中，我们可以利用transform属性的scale()方法来实现元素的缩放效果。 Zoom指的是“缩小”和“放大”的意思。

变换：scaleX(x)； /沿x轴缩放/
transform:scaleY(y); / 沿 y 轴缩放/
transform:scale(); / 同时沿x轴和y轴缩放轴缩放/

适用场景

固定宽高比的Web应用，例如大屏或固定窗口业务应用

从“vue”导入{ref}; 导出默认函数 windowResize() { // * 指向最外层容器常量 screenRef = ref(); //* 定时函数常量计时器 = ref(0); // *默认缩放值常量规模 = { 宽度：“1”，高度：“1”， }; // * 设计稿尺寸（px）常量基宽 = 1920; 常量基础高度 = 1080; // * 要维持的比率（默认1.77778） const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)); const calcRate = () => { // 当前宽高比常量当前速率 = parseFloat( (window.innerWidth / window.innerHeight).toFixed(5) ）； if (screenRef.value) { if (当前比率 > 基本比例) { // 表示更宽比例尺.宽度 = ( (窗口.innerHeight * 基本比例)/ 基宽 ).toFixed(5); scale.height = (window.innerHeight / baseHeight).toFixed(5); screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`; } 别的 { // 表示更高比例.高度 = ( 窗口.innerWidth / 基数比例 / 底座高度 ).toFixed(5); scale.width = (window.innerWidth / baseWidth).toFixed(5); screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`; } } }; 常量调整大小 = () => { 清除超时(timer.value); timeout.value = window.setTimeout(() => { 计算率（）； }, 200); }; //改变窗口大小并重绘 const windowDraw = () => { window.addEventListener("调整大小", 调整大小); }; //改变窗口大小并重绘 const unWindowDraw = () => { window.removeEventListener("调整大小", 调整大小); }; 返回 { 屏幕参考，计算率, 窗口绘制，取消窗口绘制， }; }