版式图鉴LAYOUT ATLAS ⌕ 搜索
布局切换模式 海报
№ 293

布局切换模式

定义 Definition

布局随需求切换，信息始终清晰。

要目 Key Points
切换切换前为线性顺序布局。
重组从线性流程结构重组为灵活模块。
响应布局随需求调整，以适应变化。
用法 Application

适用于需要在线性顺序与模块重组布局间切换、随需求响应变化的场景。

关键词 Keywords
切换重组响应布局模式
参见 Related
291 大体流动模式292 列下落模式294 微调模式
回忆评估 Review
看完海报，凭回忆作答——评分后排入复习队列
一级分类网页与 UI
二级主题响应式重排模式
本主题共10 个概念
高清原图 CDN 打开 ↗
学习路径 图鉴 · 研习两用
← 292 列下落模式 294 微调模式 →

实况演示

Live Demo · 真实 HTML/CSS
拖拽右下角调整宽度 · 独立页打开 ↗ 查看源码 ↗
关键 CSS fold / unfold 
/* ═══ 本 demo 自定义样式 ═══ */

.ls { display: grid; gap: 10px;
        grid-template-areas: "a b" "a c"; grid-template-columns: 1.4fr 1fr; }
  .ls .a { grid-area: a; min-height: 180px; }
  .ls .b { grid-area: b; min-height: 80px; }
  .ls .c { grid-area: c; min-height: 80px; }
  @media (max-width: 500px) {
    .ls { grid-template-areas: "a" "b" "c"; grid-template-columns: 1fr; }
    .ls .a { min-height: 90px; }
  }

/* ═══ 共享令牌类 · demo 外壳已内置 ═══ */

.blk {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line); border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-2);
  padding: 10px; min-height: 34px;
}
.blk.acc {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
.blk.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  border: 1px solid var(--line); color: var(--ink-2); padding: 2px 8px;
  border-radius: 2px; background: var(--paper-2);
}
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.card .cv { aspect-ratio: 16/10; background: color-mix(in srgb, var(--accent) 10%, var(--paper-2)); border-bottom: 1px solid var(--line); }
.card .bd { padding: 9px 10px; }
.card .bd .t { font-weight: 600; font-size: 12.5px; }
.card .bd .m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--accent) 22%, var(--paper-2)); border: 1px solid var(--line);
}
.fake-text { height: 8px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 1px; }
.fake-text.w60 { width: 60%; } .fake-text.w80 { width: 80%; } .fake-text.w40 { width: 40%; }
.fake-text + .fake-text { margin-top: 6px; }

同主题

查看全部 →
[Demo]
291 大体流动模式
291 大体流动模式