@media 不能與聚合物自定義 css 一起正常工作

Question

我有 2 個輸入，我想讓字體大小在小屏幕上顯得小而在普通屏幕上顯得大，但是當我使用自定義 css（即 --paper-input-container-label）@media 似乎無法正常工作，測試代碼下面在小屏幕上（高度 < 320）在 min-height: 480px 內使用 css @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

您需要在<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 示例

有關更多詳細信息，另請參閱/demo目錄中<iron-media-query>的源代碼，其中包含一個很好的示例https://github.com/PolymerElements/iron-media-query/blob/master/demo/index。 html

@media 不能與聚合物自定義 css 一起正常工作

問題描述

1 個解決方案

解決方案1
2 已采納 2016-05-05 10:54:44

@media 不能與聚合物自定義 css 一起正常工作

問題描述

1 個解決方案

解決方案1 2 已采納 2016-05-05 10:54:44

解決方案1
2 已采納 2016-05-05 10:54:44