--- theme: channing-cyan highlight: a11y-dark --- ### UI缩放与适配解决方案 >**普遍共识** > > 一：横向、纵向不可出现滚动条
一：可全屏（就是F11全屏模式）
一：不论在多大的屏幕中显示，页面不可变形，最好是肉眼看不出任何问题 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f80fbd92146741d888e7e9d41b835ef3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiA6aKX54OC5Zyf6LGG:q75.awebp?rk3s=f64ab15b&x-expires=1766888434&x-signature=04wHekYptWXyVp3nMKjXzoVbAek%3D) #### 目前解决方案 1. css3的 `scale`进行适配（本文使用）。 3. `rem`适配 5. `flex`适配。 7. `百分比`适配。 `` 是本人在验证多种方式最终封装的Vue组件，该组件在生产环境得到了充分验证，并在虚幻引擎、及unity等C端应用中表现良好。 #### 特点 - **针对性强**：明确针对数字孪生和高保真可视化应用，它在处理复杂的3D模型和大规模数据可视化方面进行了特别优化。 - **性能优化**：通过节流和防抖机制，减少了不必要的重绘，这在处理大量动态内容时尤为关键。相比之下，其他框架可能更多依赖于标准的CSS媒体查询和JavaScript事件监听。 - **CSS3D支持**：对于需要高性能3D渲染的应用，的CSS3D变换支持可以带来显著的性能提升和渲染质量改善。 #### 安装与使用 1. **安装**：通过 npm 安装 `` 插件。 ```bash npm install u-scale ``` 2. **全局注册**：在 Vue 应用中导入并注册插件。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import { useUscale } from 'u-scale'; const app = createApp(App); app.use(useUscale, { target: '#app', // 目标元素 size: [1920, 1080], // 默认视口尺寸 type: 'auto', // 如何调整缩放 ('width', 'height', 或 'auto') css3d: true, // 是否使用 CSS 3D 变换 ratio: 1920 / 1080, // 预设视口比例 wait: 100 // 更新缩放的节流间隔 }); app.mount('#app'); ``` 3. **组件使用** 使用 `` 组件实现响应式屏幕适配。 ```html ``` ### 组件属性详述 | 属性 | 类型 | 必填项 | 默认值 | 描述 | |---------------|--------------|--------|------------|------------------------------------------------------------------------------------------------------| | `scale` | Number | 否 | 1 | 缩放因子。允许你独立于全局配置调整元素的大小。 | | `origin` | String | 否 | 'left' | 对齐方式。定义元素相对于其父容器的初始位置，可选值包括 'left', 'right', 'center', 'bottom-L', 'bottom-R'。 | | `top` | Number | 否 | 0 | 定义元素顶部与父容器边缘的距离。注意：不能同时设置 `top` 和 `bottom`。 | | `left` | Number | 否 | 0 | 定义元素左侧与父容器边缘的距离。注意：不能同时设置 `left` 和 `right`。 | | `right` | Number | 否 | null | 定义元素右侧与父容器边缘的距离。注意：不能同时设置 `left` 和 `right`。 | | `bottom` | Number | 否 | null | 定义元素底部与父容器边缘的距离。注意：不能同时设置 `top` 和 `bottom`。 | | `pointerEvents` | String | 否 | 'auto' | 鼠标事件模式。可设为 'auto' 或 'none'。设置为 'none' 可使元素不接收鼠标事件。 | | `unit` | String | 否 | 'px' | 布局单位。可以选择 'px'（像素）或 '%'（百分比）。百分比单位适用于响应式设计。 | | `wait` | Number | 否 | 50 | 节流更新间隔。定义窗口大小变化时，两次缩放更新间的最小时间间隔，单位为毫秒。 | | `noScale` | Boolean | 否 | false | 禁用缩放。设置为 `true` 时，元素将不会根据窗口大小变化而缩放。 | | `width` | Number | 否 | null | 当 `noScale` 设为 `true` 时，可以显式设置元素的宽度。 | | `height` | Number | 否 | null | 当 `noScale` 设为 `true` 时，可以显式设置元素的高度。 | 在实际应用中，根据具体需求，可能需要根据上下文确定哪些字段是必需的。例如，在需要精确定位的场景下，`top` 或 `bottom` 和 `left` 或 `right` 至少需要一个被设置。而在不需要缩放的场景下，`noScale` 和相应的 `width` 和 `height` 就会成为必要的配置项。 #### 注意事项 - 未指定 `scale` 属性时，将使用全局配置的值。 - 内容应使用百分比或相对单位，以确保正确响应。 - 复杂布局可能需要额外的 CSS 规则以保证元素正确缩放。 ### 使用示例 ```html ``` ### 最佳实践 - **使用相对单位**：为了确保元素能够响应缩放，推荐使用百分比单位 (`%`) 或者视窗单位 (`vw`, `vh`)。 - **考虑性能**：虽然 CSS3D 变换提供了更好的渲染效果，但在某些设备上可能会导致性能问题。因此，建议在性能测试后根据实际需要开启或关闭 `css3d` 属性。 - **测试不同设备**：由于 `` 被设计为跨平台兼容，确保在多种设备和浏览器上进行充分测试，以验证其响应式表现。