使用 Babylon.js 开发时如何通过 CSS 实现 UI 自适应

        本文将介绍如何在 Babylon.js 开发中，通过预先定义的 CSS 文件实现 UI 的自适应布局，确保 UI 能够根据 Canvas 元素的尺寸动态调整。

场景描述

        假设我们已经使用 HTML 和 CSS 构建了 Babylon.js 的 UI 界面，并且所有样式都定义在 CSS 文件中。现在，我们需要让这些 UI 元素能够根据 Canvas 的尺寸动态调整，以实现自适应的效果。

解决方案

1. 使用 CSS 变量（推荐）

        CSS 变量（Custom Properties）是 CSS3 引入的特性，允许我们定义可动态更新的变量。通过结合 JavaScript，我们可以根据 Canvas 的尺寸动态调整 CSS 变量，从而实现 UI 的自适应。

1.1 在 CSS 文件中定义变量

        首先，在 CSS 文件中定义一些变量，用于控制 UI 元素的尺寸、位置等属性。

:root {
    --ui-width: 100px; /* 默认宽度 */
    --ui-height: 50px; /* 默认高度 */
    --ui-font-size: 16px; /* 默认字体大小 */
}

.ui-element {
    width: var(--ui-width);
    height: var(--ui-height);
    font-size: var(--ui-font-size);
    background-color: