--- theme: vue-pro highlight: a11y-light --- ## 前言最近项目组小美同学貌似遇到了一个棘手的问题，总是一副闷闷不乐的样子。本着都是一个项目组，应该互相帮助、共用解决问题的用意，我向小美发出了信息。我：“看你最近一直不怎么开心，遇到什么问题了吗？” 小美：“最近一直在查阅vue3项目屏幕适配的资料，发现网上资料都是vue2+webpack有关的，不知道如何适配vite项目？o(╥﹏╥)o” 我：“OK，交给哥了，我来帮你摆平！” 小美：“❤( ´･ᴗ･` )❤” > 觉得文章不错、或对自己开发有所帮助，欢迎点赞收藏！❤❤❤ ## 基于rem的适配方案 ### rem是什么？ rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。 ### 适用场景不固定宽高比的Web应用，适用于绝大部分业务场景 ![px2rem.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dff5429951ce4068bc19ae37bdbcc6af~tplv-k3u1fbpfcp-watermark.image?) ### 项目实战 1. 安装依赖 ```js npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev ``` >postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案替代了原先的`lib-flexible` 选用了当前众多浏览器兼容的`viewport` 2. 项目根目录创建 `postcss.config.js` 文件 ![QQ图片20220927110819.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc6ec08fb25b44aeaa9254e725389169~tplv-k3u1fbpfcp-watermark.image?) ```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` 文件中导入依赖 ```js import "amfe-flexible/index.js"; ``` 4. 项目重启 ## 基于scale的适配方案在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。 - transform: scaleX(x); / 沿x轴方向缩放/ - transform: scaleY(y); / 沿y轴方向缩放/ - transform: scale(); / 同时沿x轴和y轴缩放/ ### 适用场景固定宽高比的Web应用，如大屏或者固定窗口业务应用 ![scale.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9efd3e99a284af9b561a9ee7c623498~tplv-k3u1fbpfcp-watermark.image?) ### 项目实战 1. 新建`resize.ts/js`文件 ![QQ图片20220927111729.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/679548a8cd874f47bd8d6ae5a777e6ad~tplv-k3u1fbpfcp-watermark.image?) ```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` ![QQ图片20220927112000.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/464430e5a9fc458a924482d0d3d7bb9f~tplv-k3u1fbpfcp-watermark.image?) ```js ``` ## 写在最后推荐两个作者参与的开源项目，如果项目有帮助到你，欢迎star！一个简单的基于Vue3、TS、Vite、qiankun技术栈的`后台管理项目`：[https://www.xkxk.tech](https://www.xkxk.tech) 一个基于Vue3、Vite的`炫酷大屏项目`：[https://screen.xkxk.tech](https://screen.xkxk.tech)