設定方法：Polymerのメディアクエリに基づいてホスト{}？

Question

:root要素の高さを設定する必要があります。そうしないと、スクロールバーで必要なビューポートサイズが取得できません。ただし、ビューポートが900px未満の場合にのみheight: calc(100% - 130px);と設定します。

@mediaクエリを使用できないため、どうすればいいですか？ノー成功にこれを試してみました：

<template> 
    <style include="iron-flex iron-flex-alignment"> 
    :host[show] { 
     background-color: var(--pink-color); 
     width: 100%; 
     overflow-x: hidden; 
     overflow-y: auto; 
     outline: none; 
     display: flex; 
    } 

    :host[smallScreen] { 
     height: calc(100% - 130px); 
    } 

    <div hidden$="{{!show}}"> 
     <iron-media-query query="(max-width: 899px)" 
     query-matches="{{smallScreen}}"></iron-media-query> 
... 
<script> 
    Polymer({ 
     is: 'video-selection', 
     properties: { 
     show: { 
      type: Boolean, 
      value: true, 
      reflectToAttribute: true 
     }, 
     smallScreen: { 
      type: Boolean, 
      value: false, 
      reflectToAttribute: true 
     } 
     }, 

Answer 1

私はあなたが

:host([small-screen]) { 
    height: calc(100% - 130px); 
} 

JSBin example