瞭解角材料gridList

Question

我正在通過角材料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 

Answer 1

實際上，你可以從角材料文檔得到這些的意思在這裏：

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-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 px。

（md-gutter-gt-sm="8px"）意味着大於600px寬度（大於手機）的設備的拼貼塊之間的空間量應爲8px。