feat: 添加对 100dvh 支持的样式调整,优化布局适应性

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 {
min-height: 100vh;
@supports (min-height: 100dvh) {
min-height: 100dvh;
}
}

View File

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

View File

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

View File

@@ -30,6 +30,10 @@
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
@supports (height: 100dvh) {
height: 100dvh;
}
}
&.layout-overlay-active {
@@ -84,6 +88,10 @@
transition:
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);
@supports (height: 100dvh) {
height: 100dvh;
}
}
.layout-mask {