指南: 媒体对象

媒体对象是web上随处可见的一种模式。它由Nicole Sullivan命名，表示一种一侧是图片并且另一侧是描述性的文字的两列盒子，比如一篇facebook帖子或者tweet。

要求

媒体对象模式需要以下特性的一些或者全部：

• 在移动设备上被堆叠，在桌面设备上显示两列
• 图片可以在左边，也可以在右边
• 图片可以是小图，也可以是大图
• 媒体对象可以被嵌套
• 无论哪边更高，媒体对象应该清除内容

使用指南

做出选择

我选择使用Grid Layout实现媒体对象，因为它可以让我在我需要的时候控制两个维度的布局。这意味着当我们有一个页脚（footer）的时候，上面的内容很短，页脚可以被推到媒体对象的底部。

另一个使用网格布局（Grid Layout）的原因是为了可以使用fit-content图片的追踪（track）大小。通过使用 最大尺寸是200像素的fit-content ，当我们有一个小图片比如icon的时候，track仅仅得到和image的尺寸一样的大小（max-content 大小）。如果图片更大，track在200像素的时候停止增长，因为图片应用了max-width 为100%。同样，它会缩小以适应列内部的尺寸。

通过使用grid-template-areas 来实现布局，我可以看到CSS中的这个模式。我定义我的网格，其并且设置最大宽度（max-width）为500像素，因此在较小的设备上媒体对象会被堆叠起来。

模式的一个选项是翻转它将图片切换到另一边——这通过添加media-flip 类来实现，它定义了一个翻转的网格模板所以布局被镜像了。

当我们在另一个媒体对象之中嵌套一个媒体对象，我么你需要将它放到常规布局的第二个track中，当翻转时放到第一个track中

回退方案

对于这种模式有很多种可能的回退方案，取决于你希望支持的浏览器。一个比较号的方案是将图片浮动到左边，并且为盒子添加clearfix来确保它包含浮动元素。

一旦浮动元素成为网格项，浮动将不再被应用到网格上，因此你不需要做任何特殊的事情来清楚浮动。

你需要做的事情是移除应用到这些items的任何边界，以及我们在一个网格上下文中不需要的任何宽度（在网格中我们有gap属性来控制它，并且track控制了尺寸）。

MDN上相关的资源

• CSS Grid Layout
• Progressive Enhancement and Grid Layout
• Using Grid Template Areas
• fit-content
• Grid-template-areas

浏览器兼容性

.各种各样的布局方法有不同的浏览器支持。查看下面的图表得到属性的基本支持的细节。

这个页面中的兼容性表格由结构数据生成。如果你想对数据做贡献，请查看 https://github.com/mdn/browser-compat-data 并且给我们发送一个pull request。

grid-template-areas

float