路由页双列转单列改按内容区宽度判断,阈值等效提高

原来按视口 900px 切换,侧栏收拢与否会让同一视口下的内容区差出一百多
像素,且用户实测切换时右列已经太窄。改成容器查询,内容区 900px 以下
转单列,等效视口阈值提高到约 1100-1160。
This commit is contained in:
2026-08-11 17:52:00 +08:00
parent 4e504e9003
commit d028e63a74
+8 -2
View File
@@ -390,7 +390,7 @@ async function removeConfirmed() {
margin-bottom: var(--s-4);
}
/* 左列表右详情。窄屏时改成上下,详情不再吸顶 */
/* 左列表右详情。窄时改成上下,详情不再吸顶 */
.split {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
@@ -398,7 +398,13 @@ async function removeConfirmed() {
align-items: start;
}
@media (max-width: 900px) {
/* 按内容区宽度切换而不是按视口:侧栏能收拢,同一个视口宽度下内容区可宽可窄。
900px 时右列还有约 380px,再窄详情就挤得难用了 */
.page {
container-type: inline-size;
}
@container (max-width: 900px) {
.split {
grid-template-columns: 1fr;
}