Question

我有2个输入，我想让字体大小在小屏幕上看起来很小而在普通屏幕上看起来很大但是当我使用自定义css（即--paper-input-container-label）时，@ media似乎无法正常工作，在小屏幕上测试下面的代码（高度<320）使用最小高度内的css：480px @media而不是max-height：320px

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;
        }
    }
}

Answer 1

您需要在<iron-media-query>内或<template is="dom-bind">内使用<dom-module>才能设置变量（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

@media不能正常使用聚合物定制css

1 个答案: