refactor(situational-awareness): 将视口单位限制在1920x1080以内以防止溢出
更新CSS自定义属性,使用clamp()和min()函数处理视口和容器单位, 确保在大屏幕上布局宽度不超过1920px,高度不超过1080px。 调整溢出属性以隐藏水平滚动条,并在需要时允许垂直滚动。
This commit is contained in:
parent
07948f788c
commit
d9e326de18
@ -560,16 +560,16 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
|
||||
container-name: situational-awareness;
|
||||
container-type: size;
|
||||
|
||||
// 为旧版浏览器提供视口单位回退
|
||||
--cq-inline-100: 100vw;
|
||||
--cq-block-100: 100vh;
|
||||
// 为旧版浏览器提供视口单位回退,封顶 1920×1080
|
||||
--cq-inline-100: clamp(0px, 100vw, 1920px);
|
||||
--cq-block-100: clamp(0px, 100vh, 1080px);
|
||||
|
||||
// 当支持容器单位时覆盖为容器单位
|
||||
// 当支持容器单位时覆盖为容器单位,同样封顶
|
||||
@supports (width: 1cqw) {
|
||||
--cq-inline-100: 100cqw;
|
||||
--cq-inline-100: min(100cqw, 1920px);
|
||||
}
|
||||
@supports (height: 1cqh) {
|
||||
--cq-block-100: 100cqh;
|
||||
--cq-block-100: min(100cqh, 1080px);
|
||||
}
|
||||
|
||||
// 可配置的布局变量(使用 calc 直接计算,避免函数嵌套)
|
||||
@ -586,10 +586,13 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// max-width: 1920px;
|
||||
// max-height: 1080px;
|
||||
min-width: var(--sa-min-width);
|
||||
min-height: var(--sa-min-height);
|
||||
background-color: var(--bg-dark);
|
||||
overflow: auto; // 当宿主尺寸 < 最小尺寸时允许滚动
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; // 当宿主尺寸 < 最小尺寸时允许滚动,达到上限时不放大
|
||||
|
||||
// PageHeader 浮在顶部
|
||||
> :first-child {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user