BEM命名+Flexbox+min-width可实现Media Object响应式布局，关键在于用min-width替代固定flex-basis、仅在容器上设@media断点、通过modifier控制视觉变体而非布局逻辑。
直接说结论：用 BEM 命名 + Flexbox 布局 + min-width 控制媒体项最小尺寸，就能在不写 JS 的前提下让 Media Object 在小屏自动堆叠、大屏左右并排——关键不是“套BEM”，而是 BEM 类名要承载真实的响应式意图。
为什么不能只靠 .media__figure 和 .media__body 就完事？
BEM 本身不解决布局逻辑，它只负责命名清晰。如果你写：
.media { display: flex; }
.media__figure { flex: 0 0 120px; }
.media__body { flex: 1; }
那在手机上图片会挤压文字，甚至文字换行异常。真实问题出在：flex 默认不换行，且flex-basis 固定值在小屏下失效。
- 必须用
min-width替代固定width或flex-basis，让图片容器有收缩底线 -
.media__figure应设min-width: 80px（而非120px），避免小屏被撑开 - 用
flex-wrap: wrap+flex-direction: column组合，比纯flex-direction: row更可控
@media 断点里该改哪些类？只动容器，不动子元素
响应式切换的主体是布局容器，不是每个子元素都加媒体查询。错误做法是给 .media__figure 和 .media__body 分别写两套 @media 规则——这破坏 BEM 的封装性，也难维护。
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
立即学习“前端免费学习笔记（深入）”；
- 只在
.media上定义断点行为：@media (max-width: 768px) { .media { flex-direction: column; } } -
.media__figure保持align-self: flex-start，确保小屏时图片左对齐不飘移 - 如果需要图片在小屏居中，加
.media--centered .media__figure { align-self: center; }，用修饰符（modifier）而不是新断点
图文混排时 img 的 max-width 和 height 怎么设才不塌陷？
常见坑：给 .media__figure img 设了 width: 100%，但父容器没高度，图片直接压成一条线。
- 必须给
.media__figure设min-height: 48px（或根据内容定个底线值） -
img用max-width: 100%; height: auto;，禁用height固定值 - 若需等比缩放头像类图片，用
aspect-ratio: 1 / 1（现代浏览器），老版本 fallback 到padding-top: 100%+position: relative+img绝对定位
真正难的不是写对几个 class，而是想清楚：BEM 的 --modifier 是为「视觉变体」服务的，而 @media 是为「布局断点」服务的——两者职责不能混。一个 .media--rev（反转图文顺序）不该依赖屏幕宽度，一个 @media (min-width: 1200px) 也不该去改字体颜色。边界划清了，组件才好复用。
