我必须在: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
}
},