polymer - 如何设置:host {} based on media query in Polymer?

Question

我必须在 :root 元素上设置高度，否则我将无法通过滚动条获得所需的视口(viewport)大小。但是，我只想在视口(viewport)小于 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