feat: 添加对 100dvh 支持的样式调整,优化布局适应性
This commit is contained in:
@ -20,4 +20,7 @@ a {
|
|||||||
|
|
||||||
.layout-wrapper {
|
.layout-wrapper {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
@supports (min-height: 100dvh) {
|
||||||
|
min-height: 100dvh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
Reference in New Issue
Block a user