@media don't work properly with polymer custom css

问题

I have 2 inputs and I want to make font-size appear small on small screens and big on normal screens but when I use custom css(ie --paper-input-container-label) @media seems not to work properly, testing code below on small screens (height < 320) use css inside of min-height: 480px @media instead 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;
        }
    }
}

回答1:

You need to use the <iron-media-query> inside an <template is="dom-bind"> or inside a <dom-module> for it to be able to set a variable (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

For more details see also the source code of <iron-media-query> in the /demo directory which contains a nice example https://github.com/PolymerElements/iron-media-query/blob/master/demo/index.html

来源：https://stackoverflow.com/questions/37045958/media-dont-work-properly-with-polymer-custom-css

标签

html

css

polymer