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

我有2個輸入，我想讓字體大小在小屏幕上顯示爲小而在普通屏幕上顯示爲大，但是當我使用自定義CSS（即--paper-input-容器標籤）@media似乎無法正常工作，下面的測試代碼在小屏幕（高度< 320）使用CSS最小高度內：480個像素@media代替最大高度：320像素@media不能正常使用聚合物自定義css

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

來源

2016-05-05 José Sánchez

usi怎麼樣ng https://elements.polymer-project.org/elements/iron-media-query？ –

我試過這個選項，但我不能使它的工作:(或我不知道如何使用鐵媒體查詢https://jsfiddle.net/c5mq2rbt/5/<---這個例子在鉻我可以看到什麼是在所有分辨率的模板和Firefox中沒有顯示 –

您需要使用<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

欲瞭解更多詳情，請參閱還源代碼<iron-media-query>在/demo這個目錄裏面有個很好的例子https://github.com/PolymerElements/iron-media-query/blob/master/demo/index.html

來源

2016-05-05 10:54:44

現在它的工作！ –

偉大的:)。。。。 –

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

回答

相關問題