了解角度材料网格列表答案

【问题标题】：Understanding angular-material gridList了解角度材料网格列表
【发布时间】：2016-01-25 05:36:07
【问题描述】：

我正在使用 angular-material gridList。您可以在 codepen here 中查看示例。我想了解此示例中以下属性的含义以及如何使用它们。文档似乎对此保持沉默。

md-cols-sm
md-cols-md
md-cols-gt-md
md-row-height-gt-md
md-row-height
md-gutter
md-gutter-gt-sm

【问题讨论】：

【解决方案1】：

您实际上可以从这里的 angular material docs 中了解这些含义：

和

您可能会注意到，-sm-、-md- 和 -lg- 基本上是 media-query-name，分别针对小型、中型和大型设备。

现在，根据您的问题，

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">

基本上意味着创建一个网格列表，其中有：

小型设备中的“一”列/网格（md-cols-sm="1"），

中型设备中的“两个”列/网格 (md-cols-md="2") 和

宽度大于 960 像素 (md-cols-gt-md="6") 的设备中的“六”列/网格。

接下来，(md-row-height-gt-md="1:1") 表示宽度大于 960 像素的设备中的宽高比应为 1:1。

(md-row-height="2:2") 表示宽高比为2:2。

(md-gutter="12px") 表示图块之间的间距应为 12 像素。

(md-gutter-gt-sm="8px") 表示宽度大于 600 像素（比手机大）的设备的磁贴之间的空间量应为 8 像素。

【讨论】：

但是为什么对于我的codePen示例中的单个gridList all: md-cols-sm md-cols-md md-cols-gt-md 被使用，我也无法弄清楚它们的值，例如在下面：` `
你知道angular-material md-cols背后的css属性是什么吗？如果他们完全是一个..