在我的styles/app-theme.html
中,我尝试更改媒体查询中paper-drawer-panel
的菜单图标大小。此元素位于index.html中。因为它在影子dom,我似乎无法访问它。我尝试过:
可能不相关,但这里是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;
}
}
没有成功。有什么建议?
答案 0 :(得分:3)
Polymer目前使用垫片(部分polyfill)来评估自定义属性。因此,它们不会自动重新计算。但是,您可以使用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')
});
}
});
&#13;
<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>
&#13;