自定义元素中的@media 查询- 仅最后设置生效

Question

出于某种原因，@media 查询在我的自定义元素中不起作用....在本例中为 iron-icon。无论屏幕大小，只有最后的设置生效。如果我切换订单，那么最后一个订单就会生效。对于如何解决这个问题，有任何的建议吗？

<dom-module id="portfolio-page">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 600px;
    }

    @media all and (max-width: 500px) {
      iron-icon { 
        --iron-icon-height: 108px;
        --iron-icon-width: 105px;
        margin-top: -21px;
      }
    }


    @media all and (min-width: 600px) {
      iron-icon { 
        --iron-icon-height: 250px;
        --iron-icon-width: 250px;
      }
    }

        <div class="layout horizontal center-center">
          <iron-icon icon="build"></iron-icon>
          <iron-icon icon="cloud-circle"></iron-icon>
          <iron-icon icon="http"></iron-icon>
        </div>

Answer 1

您运行受到了 style shimmer 的限制。这很糟糕，但在这个 GitHub 问题中有一个详细的解决方法：https://github.com/Polymer/polymer/issues/2149

我在这个视频里也谈了一点：https://www.youtube.com/watch?v=_VqeFubvNKw&list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo&index=4

自定义元素中的@media 查询- 仅最后设置生效

@media query in custom element- only last setting takes effect

polymer

polymer-1.0