使用聚合物應用網格佈局創建斷點

Question

聚合物中的應用網格元素（助手類）允許創建響應式網格佈局。給定的Polymer Example創建一個佈局，其中三個列表項彼此水平放置。

爲了使它在較小的屏幕上響應地將網格從3列更改爲1，必須聲明斷點。文檔討論了在@media規則中定義自定義屬性。 （上面的鏈接）

我無法獲取媒體規則來進行更改。 我在Polymer中發現了關於@media規則的類似問題，但答案始終指向使用iron-media-query。現在Polymer文檔提到了@media，我相信一定有辦法做到這一點。

我嘗試使用它像這樣，但不能得到它的工作：

<style include="app-grid-style"> 
    :host { 
     --app-grid-columns: 3; 
     --app-grid-item-height: 200px; 
     --app-grid-gutter: 20px; 
    } 
    @media (max-width: 600px) { 
     :host { 
     --app-grid-columns: 1; 
     } 
    } 
    </style> 

Answer 1

望着demos他們總是叫this.updateStyles當窗口大小，以確保所有的自定義屬性正確應用。

不幸的是這些信息是從文檔丟失...

attached: function() { 
    this._updateGridStyles = this._updateGridStyles || function() { 
     this.updateStyles(); 
    }.bind(this); 
    window.addEventListener('resize', this._updateGridStyles); 
    }, 

    detached: function() { 
    window.removeEventListener('resize', this._updateGridStyles); 
    } 

如果您正在使用的應用程序，格柵的元件之外的主文檔中，你將不得不調用Polymer.updateStyles()代替。