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

你正在遇到风格微光的限制。它很糟糕但是这个GitHub问题中有详细的解决方法：https://github.com/Polymer/polymer/issues/2149

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

自定义元素中的@media查询 - 仅限上一次设置生效

1 个答案: