版式图鉴LAYOUT ATLAS ⌕ 搜索
自适应布局 海报
№ 241

自适应布局

定义 Definition

根据设备屏幕宽度，自动选择最合适的预设布局模板，而不是拉伸内容，确保信息层级清晰、体验一致。

要目 Key Points
预设版本提前设计多套布局模板，覆盖不同屏幕范围。
按屏切换根据屏幕宽度自动识别，切换对应布局模板。
多套模板针对内容特点定制模板，满足多样化信息展示。
用法 Application

面向 320px 小屏、768px 中屏、1200px 大屏等不同设备屏幕，按预设模板自动切换布局。

关键词 Keywords
自适应布局预设模板按屏切换屏幕宽度
参见 Related
222 普通流布局223 块级布局224 行内布局
易混 Confusable
240 响应式布局 并排对比 →
回忆评估 Review
看完海报，凭回忆作答——评分后排入复习队列
一级分类网页与 UI
二级主题CSS 流、定位与响应
本主题共21 个概念
高清原图 CDN 打开 ↗
学习路径 图鉴 · 研习两用
← 240 响应式布局 242 容器查询布局 →

实况演示

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

.a-page { width: 300px; margin: 0 auto; display: grid; gap: 8px; }
  .a-page .row { display: grid; gap: 8px; }
  .a-page .blk { min-height: 46px; }
  .bp { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: .1em; margin: 0 0 8px; }
  @media (min-width: 460px) { .a-page { width: 440px; } .a-page .row { grid-template-columns: 1fr 1fr; } .bp::after { content: "档位 2 · 440PX 双列"; } }
  @media (min-width: 760px) { .a-page { width: 680px; } .a-page .row { grid-template-columns: repeat(3, 1fr); } .bp::after { content: "档位 3 · 680PX 三列"; } }

/* ═══ 共享令牌类 · 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; }

同主题

查看全部 →