这篇翻译不完整。请帮忙从英语翻译这篇文章

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
grid-template-areasChrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16Firefox Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 43
Full support 43
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

float

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
floatChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
Flow-relative values inline-start and inline-end
Experimental
Chrome No support NoEdge No support NoFirefox Full support 55IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 55Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

文档标签和贡献者

此页面的贡献者: wre232114
最后编辑者: wre232114,