bxztApp/packages/screen/src/styles/mixins.scss

// 屏幕适配工具（支持容器查询）
// 设计稿基准：1920px (宽) × 982px (高，不含头部)
//
// 容器查询支持：
// 当组件嵌入到其他系统时，会自动使用容器单位（cqw/cqh）而非视口单位（vw/vh）
// 这确保了子组件相对于父容器而非整个视口进行缩放
//
// 回退策略：
// 使用 CSS 变量 --cq-inline-100 和 --cq-block-100 提供渐进增强
// 不支持容器查询的浏览器会回退到视口单位

$design-width: 1920;
$design-height: 982;

// 将 px 转换为容器宽度单位（基于设计稿宽度 1920px）
// 在支持容器查询的浏览器中使用 cqw，否则回退到 vw
@function vw($px) {
  @return calc($px / $design-width * var(--cq-inline-100, 100vw));
}

// 将 px 转换为容器高度单位（基于设计稿内容区域高度 982px）
// 在支持容器查询的浏览器中使用 cqh，否则回退到 vh
@function vh($px) {
  @return calc($px / $design-height * var(--cq-block-100, 100vh));
}

// 字体大小转换（使用容器宽度确保响应式）
// 字体随容器宽度缩放，保持与其他元素的比例关系
@function fs($px) {
  @return vw($px);
}

// 使用示例：
// width: vw(580);      // 580px → cqw (或 vw 作为 fallback)
// height: vh(400);     // 400px → cqh (或 vh 作为 fallback)
// font-size: fs(16);   // 16px → cqw (或 vw 作为 fallback)
//
// 注意：这些函数需要父容器设置了 container-type: inline-size 或 size
// 例如在 CockpitLayout.vue 中已经设置了相应的容器类型