媒体对象是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