JOJO/starraid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复竖屏手机overlay居中溢出滚不到顶：max-height 760px以下复用横屏的flex-start+伪元素留白方案（自选武装面板踩坑）

Browse Source
This commit is contained in:
JOJO 2026-08-06 18:33:40 +08:00
parent d998cf3a59
commit 8e10ea2cf0
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
star-raid/css/style.css
View File

@ -168,6 +168,14 @@ h1.logo{font-size:clamp(20px,5.4vw,44px);color:#fff;letter-spacing:4px;line-heig
.lb-list{flex:1;min-height:100px;overflow-y:auto} .lb-list{flex:1;min-height:100px;overflow-y:auto}
.lb-empty{color:var(--dim);font-size:clamp(7px,1.3vw,9px);padding:14px 0;letter-spacing:2px} .lb-empty{color:var(--dim);font-size:clamp(7px,1.3vw,9px);padding:14px 0;letter-spacing:2px}
/* ---------- 竖屏矮屏（手机）：内容超屏的 overlay 改顶部对齐，防止居中溢出顶部被裁不可滚到顶 ---------- */
@media (max-height: 760px){
.ovl:not(#o-home):not(#o-demo){justify-content:flex-start}
.ovl:not(#o-home):not(#o-demo)::before,
.ovl:not(#o-home):not(#o-demo)::after{content:"";flex:1 0 auto;min-height:8px}
.ovl{gap:6px}
}
/* ---------- 横屏：中间竖屏显示区域（letterbox），UI 收紧 ---------- */ /* ---------- 横屏：中间竖屏显示区域（letterbox），UI 收紧 ---------- */
@media (orientation: landscape){ @media (orientation: landscape){
#wrap{position:fixed;inset:0;margin:auto;width:min(100vw,calc(100dvh * 0.75));height:auto;aspect-ratio:3/4} #wrap{position:fixed;inset:0;margin:auto;width:min(100vw,calc(100dvh * 0.75));height:auto;aspect-ratio:3/4}