feat: 优化容器间距,增加响应式留白
- 移动端:左右各 24px - 平板端:左右各 48px - 桌面端:左右各 64px - 改善大屏幕上的视觉体验
This commit is contained in:
@@ -253,12 +253,40 @@
|
|||||||
padding-right: var(--spacing-lg);
|
padding-right: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container-wide {
|
||||||
|
padding-left: var(--spacing-2xl);
|
||||||
|
padding-right: var(--spacing-2xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container-wide {
|
||||||
|
padding-left: 4rem;
|
||||||
|
padding-right: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.container-full {
|
.container-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: var(--spacing-lg);
|
padding-left: var(--spacing-lg);
|
||||||
padding-right: var(--spacing-lg);
|
padding-right: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container-full {
|
||||||
|
padding-left: var(--spacing-2xl);
|
||||||
|
padding-right: var(--spacing-2xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container-full {
|
||||||
|
padding-left: 4rem;
|
||||||
|
padding-right: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.section-padding {
|
.section-padding {
|
||||||
padding-top: var(--spacing-5xl);
|
padding-top: var(--spacing-5xl);
|
||||||
padding-bottom: var(--spacing-5xl);
|
padding-bottom: var(--spacing-5xl);
|
||||||
|
|||||||
Reference in New Issue
Block a user