feat: 优化容器间距,增加响应式留白
- 移动端:左右各 24px - 平板端:左右各 48px - 桌面端:左右各 64px - 改善大屏幕上的视觉体验
This commit is contained in:
@@ -253,12 +253,40 @@
|
||||
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 {
|
||||
width: 100%;
|
||||
padding-left: 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 {
|
||||
padding-top: var(--spacing-5xl);
|
||||
padding-bottom: var(--spacing-5xl);
|
||||
|
||||
Reference in New Issue
Block a user