如何根据 Polymer 中的媒体查询设置 :host {}？

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

如何根据 Polymer 中的媒体查询设置 :host {}？

How to set :host {} based on media query in Polymer?

polymer

polymer-1.0