了解角度材料网格列表
Posted
技术标签:
【中文标题】了解角度材料网格列表【英文标题】：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 中了解这些含义：
https://material.angularjs.org/latest/api/directive/mdGridList
和
https://material.angularjs.org/latest/layout/options
您可能会注意到，-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- 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 被使用，我也无法弄清楚它们的值，例如在下面：`以上是关于了解角度材料网格列表的主要内容，如果未能解决你的问题，请参考以下文章