@media 不能与聚合物自定义 css 一起正常工作答案

【问题标题】：@media don't work properly with polymer custom css@media 不能与聚合物自定义 css 一起正常工作
【发布时间】：2016-08-30 23:13:14
【问题描述】：

我有 2 个输入，我想让 font-size 在小屏幕上看起来很小，在普通屏幕上看起来很大，但是当我使用自定义 css（即 --paper-input-container-label）@media 似乎无法正常工作，在小屏幕（高度

HTML

    <paper-input-container>
        <label>E-mail</label>
        <input is="iron-input">
    </paper-input-container>

    <paper-input-container>
        <label>Password</label>
        <input is="iron-input" type="password">
    </paper-input-container>

CSS

@media only screen (max-height: 320px) {
    paper-input-container {
        --paper-input-container-label: {
            font-size: 12px;
        }
        --paper-input-container-input: {
            font-size: 12px;
        }
    }
}

@media only screen(min-height: 480px) {
    paper-input-container {
        --paper-input-container-label: {
            font-size: 16px;
        }
        --paper-input-container-input: {
            font-size: 16px;
        }
    }
}

【问题讨论】：

用elements.polymer-project.org/elements/iron-media-query怎么样？
我尝试了该选项，但我无法使其工作:( 或者我不知道如何使用 Iron-media-query jsfiddle.net/c5mq2rbt/5/<--- 这个示例在 chrome 中我可以看到里面的模板所有分辨率，在 Firefox 中没有显示

标签： html css polymer

【解决方案1】：

您需要在 <template is="dom-bind"> 或 <dom-module> 内使用 <iron-media-query> 才能设置变量 (isBetween500_700px)

  <body class="fullbleed">

    <template is="dom-bind">
      <iron-media-query query="(min-width:500px)" query-matches="{{isBetween500_700px}}"></iron-media-query>
      <template is="dom-if" if="{{isBetween500_700px}}">
        <!-- anything in here is displayed only when the display port is between 500 and 700 pixels-->
        <h1>Hello</h1>
        <p>I am inside 500x700 </p>

      </template>
      <template is="dom-if" if="{{!isBetween500_700px}}">
        <p>I am inside other</p>
      </template>
    </template>

  </body>

Plunker example

更多细节参见/demo目录中<iron-media-query>的源代码，其中包含一个很好的例子https://github.com/PolymerElements/iron-media-query/blob/master/demo/index.html

【讨论】：