使用聚合物应用网格布局创建断点

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()代替。