使用Polymer应用程序网格布局创建断点

Posted 2021-05-06

Polymer中的app-grid Element（辅助类）允许创建响应式网格布局。给定的Polymer Example创建一个布局，其中三个列表项水平放置在彼此旁边。

为了使其在较小的屏幕上响应地将网格从3列更改为1，必须声明断点。该文档讨论了在@media规则中定义自定义属性。 （上面的链接）

我无法通过媒体规则来做出改变。我在Polymer中找到了关于@media规则的类似问题，但答案总是指出与铁媒体查询一起使用。既然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>

答案

查看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);
  }

如果您在主文档中的元素之外使用app-grid，则必须调用Polymer.updateStyles()。