聚合物纸张输入字体大小媒体查询问题答案

【问题标题】：Polymer paper-input font size media query issue聚合物纸张输入字体大小媒体查询问题
【发布时间】：2016-01-14 03:15:16
【问题描述】：

我正在使用 goole 的聚合物组件纸张输入。

我希望这种纸质输入具有响应性，因此我使用了与输入字体大小相关的媒体查询但是meida查询好像没有生效。

使用的媒体查询：

@media (max-width: 500px) {
        paper-input {
          font-size: 13px !important;
          --paper-input-container-input: {
            font-size: 13px !important;
          }
          ;
        }

小提琴

http://jsfiddle.net/za1gn0pe/11/

基本上我希望输入文本的字体大小根据屏幕大小进行更改并做出响应。

【问题讨论】：

如果您是 Polymer 的新手，请尝试使用 1.0+ - 我看到您的小提琴使用的是 0.5 的东西。此外，如果您只是将 Polymer 用于 UI 内容（我看到您在 index.html 中使用没有 dom-bind 的元素），请尝试在 Google 上搜索“材料设计灯”。

标签： css polymer

【解决方案1】：

每https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

Polymer 的自定义属性 shim 评估并应用自定义属性值在元素创建时一次。

& 似乎在媒体查询中设置自定义属性是在创建时间之后发生的。因此，您应该能够使用重新评估自定义属性的 updateStyles API（也在该链接部分中）解决问题。

【讨论】：