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

Question

Polymer 中的 app-grid 元素（助手 class）允许创建响应式网格布局。给定的 Polymer Example 创建了一个布局，其中三个列表项水平并排放置。

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

我无法获取媒体规则来进行更改。我在 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 他们总是在调整 window 大小时调用 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()。

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

Creating breakpoints using the Polymer app-grid layout

layout

grid-layout

media-queries

polymer

polymer-1.0