指南: 媒体对象

媒体对象是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上相关的资源

浏览器兼容性

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

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

grid-template-areas

BCD tables only load in the browser

float

BCD tables only load in the browser