代码之家 › 专栏 › 技术社区 › dman

无法在媒体查询中为阴影域中的元素设置样式

polymer-1.0 polymer css

dman · 技术社区 · 9 年前

在我的 styles/app-theme.html 我正在尝试更改的菜单图标大小 paper-drawer-panel 在媒体查询中。此元素位于index.html中。因为它在阴影域中,我似乎无法访问它。我尝试了:

可能不相关,但这里是index.html:

  <template is="dom-bind" id="app">
    <paper-drawer-panel force-narrow="true">
      <div drawer>
        <drawer-custom></drawer-custom>
      </div>
      <div main>
        <div id="header-v-center">
          <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>

  @media (max-width: 600px) {
    iron-icon#icon::shadow {
      height: 6px;
      width: 5px;
    }
  }

和

  @media (max-width: 600px) {

    :root {
      --iron-icon-height: 6px;
      --iron-icon-width: 50px;
    }
  }

没有成功。有什么建议吗?

1 回复 | 直到 9 年前

geppy Greg Lyon 9 年前

聚合物目前使用垫片(部分聚合物填充)来评估自定义特性。因此,它们不会自动重新计算。然而,你能做的是使用 iron-media-query (或直接使用 matchMedia )知道什么时候打电话 updateStyles 在需要更新的元素上。

Here's an example of using updateStyles :

Polymer({

    is: 'seed-element',

    properties: {
      largeScreen: {
        type: Boolean,
        observer: '_largeScreenChanged'
      }
    },
    
    _largeScreenChanged: function(newValue) {
      this.updateStyles({
        '--h1-color': (newValue ? 'red' : 'blue')
      });
    }
  });

<dom-module id="seed-element">
  <template>
    <style>
      h1 {
        color: var(--h1-color, red);
      }
    </style>
    
    <h1>header</h1>
    
    <iron-media-query query="(max-width: 600px)" query-matches="{{largeScreen}}"></iron-media-query>
  </template>

</dom-module>

<seed-element id="topmenu"></seed-element>

推荐文章

Kuba Å imonovský · Templatizer-如何多次渲染同一模板,Polymer 2。十、

7 年前

Riposte · 从单元渲染器迁移Vaadin网格聚合物元素

7 年前

AlexBenoit · 聚合物2条件属性

7 年前

Nikhil Raghavendra · Polymer 2.0数据绑定不工作

7 年前

user3310115 · 如何结合铁计时器和力矩js在聚合物中显示hh:mm:ss格式

7 年前

Yanko Ojeda · 如何在熨斗窗体内重置纸张下拉菜单?

7 年前

Matthew · 如何解决iron ajax响应延迟问题

7 年前

yberg · 使用nginx反向代理服务聚合物PWA

7 年前

Mason · 如何要求服务人员忽略与Polymer中特定URL模式匹配的请求?

7 年前

Yairopro · Web组件未显示

7 年前