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 {}？

1 个答案: