Zzc
23ea3af0de
增加对 CSS 容器查询的支持，从而在嵌入式场景中实现响应式缩放。 更新了 mixin，使其使用容器单位（cqw/cqh）并为不支持的浏览器提供视口回退。 修改了 CockpitLayout，使用 CSS 自定义属性实现灵活嵌入，包括窄容器的紧凑模式。
41 lines
1.5 KiB
SCSS
41 lines
1.5 KiB
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 中已经设置了相应的容器类型
|
||
|