Zzc
23ea3af0de
增加对 CSS 容器查询的支持，从而在嵌入式场景中实现响应式缩放。 更新了 mixin，使其使用容器单位（cqw/cqh）并为不支持的浏览器提供视口回退。 修改了 CockpitLayout，使用 CSS 自定义属性实现灵活嵌入，包括窄容器的紧凑模式。
30 lines
565 B
SCSS
30 lines
565 B
SCSS
@use './mixins.scss' as *;
|
||
|
||
/**
|
||
* 全局 CSS 容器查询回退
|
||
*
|
||
* 这些根级别变量为不支持容器查询的浏览器提供默认的视口单位。
|
||
* 设置了 container-type 的组件会在支持时覆盖这些值为容器单位（cqw/cqh）。
|
||
*/
|
||
:root {
|
||
--cq-inline-100: 100vw;
|
||
--cq-block-100: 100vh;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
#app {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|