feat: 添加对 100dvh 支持的样式调整,优化布局适应性
All checks were successful
/ depcheck (push) Successful in 2m48s
/ build-and-deploy-to-vercel (push) Successful in 1m40s
/ playwright (push) Successful in 1m54s

This commit is contained in:
严浩
2024-12-29 02:01:39 +08:00
parent a09fb23df0
commit 8ea637d7a0
4 changed files with 18 additions and 0 deletions

View File

@ -20,4 +20,7 @@ a {
.layout-wrapper { .layout-wrapper {
min-height: 100vh; min-height: 100vh;
@supports (min-height: 100dvh) {
min-height: 100dvh;
}
} }

View File

@ -5,6 +5,9 @@
justify-content: space-between; justify-content: space-between;
padding: 6rem 2rem 0 2rem; padding: 6rem 2rem 0 2rem;
transition: margin-left var(--layout-section-transition-duration); transition: margin-left var(--layout-section-transition-duration);
@supports (min-height: 100dvh) {
min-height: 100dvh;
}
} }
.layout-main { .layout-main {

View File

@ -15,6 +15,10 @@
background-color: var(--surface-overlay); background-color: var(--surface-overlay);
border-radius: var(--content-border-radius); border-radius: var(--content-border-radius);
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
@supports (height: 100dvh) {
height: calc(100dvh - 8rem);
}
} }
.layout-menu { .layout-menu {

View File

@ -30,6 +30,10 @@
0px 3px 5px rgba(0, 0, 0, 0.02), 0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05), 0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08); 0px 1px 4px rgba(0, 0, 0, 0.08);
@supports (height: 100dvh) {
height: 100dvh;
}
} }
&.layout-overlay-active { &.layout-overlay-active {
@ -84,6 +88,10 @@
transition: transition:
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99), transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99); left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
@supports (height: 100dvh) {
height: 100dvh;
}
} }
.layout-mask { .layout-mask {