fix(mobile): 窄屏主内容被挤出视口,侧栏与页头适配手机/平板
- ≤1100 时滚动容器不换行、aside/main 不再锁 100% 高(之前 main 被排到视口右侧,完全看不见) - 平板:资料卡 + 导航卡两列并排;手机:只留导航卡(资料/服务卡隐藏) - 手机页头:隐藏跑马灯,改两列(品牌 + 操作图标),高度 56 - 删掉一直没生效的 .sidebar 网格规则(被更高优先级的 flex 规则盖住)
This commit is contained in:
+57
-7
@@ -837,15 +837,13 @@
|
|||||||
/* ---------- 响应式 ---------- */
|
/* ---------- 响应式 ---------- */
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
@media (max-width: 1100px) {
|
||||||
.sidebar {
|
/* 单列堆叠:滚动容器不能换行,否则侧栏占满高度后主内容会被排到视口右侧(看不见) */
|
||||||
display: grid;
|
#page-scroll {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
flex-wrap: nowrap;
|
||||||
gap: var(--su-space-3);
|
|
||||||
padding: 0 var(--su-space-4) var(--su-space-4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card {
|
.profile-card {
|
||||||
grid-row: span 2;
|
grid-row: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-panel {
|
.service-panel {
|
||||||
@@ -862,12 +860,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 820px) {
|
@media (max-width: 820px) {
|
||||||
.sidebar {
|
/* 手机上只留分组导航:资料卡 / 本地服务卡太占地,导航还留着方便进分组 */
|
||||||
|
#page-scroll > aside .profile-card,
|
||||||
|
#page-scroll > aside .service-panel {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机上页头只留品牌 + 操作图标:跑马灯放不下,会盖到下面的搜索条上 */
|
||||||
|
.header-ticker-slot {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header-inner {
|
.site-header-inner {
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: var(--su-space-2);
|
||||||
height: 56px;
|
height: 56px;
|
||||||
|
padding: 0 var(--su-space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
gap: var(--su-space-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1607,3 +1619,41 @@ html.theme-transition .site-background {
|
|||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- 窄屏覆盖(放文件末尾:要盖过上面的侧栏基础规则) ---------- */
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
/* 侧栏 / 主内容在窄屏都不锁 100% 高、不吸顶;放在文件末尾才压得过上面的基础规则 */
|
||||||
|
#page-scroll > aside {
|
||||||
|
position: static;
|
||||||
|
align-self: stretch;
|
||||||
|
height: auto;
|
||||||
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-scroll > main {
|
||||||
|
height: auto;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-scroll > aside .sidebar-wrap {
|
||||||
|
height: auto;
|
||||||
|
padding: 0 var(--su-space-4) var(--su-space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 资料卡 + 导航卡并排,少占一屏 */
|
||||||
|
#page-scroll > aside .sidebar-home {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: var(--su-space-3);
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
/* 手机上只留导航卡,单列铺开 */
|
||||||
|
#page-scroll > aside .sidebar-home {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user