Question

我在聚合物组件中有这个样式表：

<style include="app-grid-style">
  :host {
     --app-grid-columns: 1;
     --app-grid-gutter: 10px;
     display: block;
     margin: 0 auto;
  }

  @media only screen and (min-width: 768px) {
    :host {
       --app-grid-columns: 2;
       --app-grid-gutter: 15px;
    }
  }

  @media only screen and (min-width: 1170px) {
    :host {
      width: 90%;
      --app-grid-columns: 4;
      --app-grid-gutter: 30px;
    }
  }

  paper-button {
    margin: 0;
    min-width: 0;
    text-transform: none;
    color: var(--app-dark-primary-color, black);
  }

  .header {
    @apply(--paper-font-headline);
    color: var(--app-dark-gray-color);
  }

  .header-icon {
    float: right;
    font-size: 15px;
    vertical-align: middle;
  }

  p {
    color: var(--app-light-gray-color);
  }
</style>

好吧，媒体查询似乎没问题，因为如果我调整浏览器大小并刷新，我会看到包含更改的页面，或者如果我从iPhone访问该页面，我会看到该网站的smarphones。

但是，我认为我必须看到当我调整浏览器大小时css如何更改页面而不必重新加载页面。

我的样式表中是否有任何错误？

Answer 1

好的，我在聚合物文档中找到了解决方案。我认为它有点隐藏：

＆＃34;对于不支持自定义属性的浏览器，请调用Polymer.updateStyles（）以在窗口调整大小时重新评估媒体查询＆＃34; - 有关更多信息：https://www.polymer-project.org/1.0/docs/release-notes#v-1-6-0

分析文档中的示例，我发现他们在聚合物元素的附加函数中调用该方法。

我已经尝试过这个修复程序并且它有效！

在浏览器刷新之前不评估CSS Media Query

1 个答案: