Question

在尝试使用Polymer core-media-query元素来相应调整布局时，我有点困惑。我理解如何设置查询何时为真的断点，但我不确定如何调整我试图在断点处更改的元素的各个属性。

这是我到目前为止所拥有的：

<core-media-query query="max-width: 884px" queryMatches="{{smallScreen}}">
</core-media-query>

和我的元素：

<div class="footer-container" vertical?="{{smallScreen}}"
horizontal?="{{!smallScreen}}" center-justified layout center>

我在Github上找到了这个。它适用于在smallScreen == true时将布局移动到垂直方向，但我还需要更改center-justified到end-justified以及其他一些属性。我该怎么做呢？

我试过这样做：

<div class="left-container" center?="{{smallScreen}}" start?="{{!smallScreen}"
vertical center-justified layout>

但它似乎没有做任何事情。它得到了它!smallScreen，但似乎没有看到查询何时为真。 HMM的

修改：它似乎适用于center-justified和end-justified只是不能使用跨轴的东西

Answer 1

您可以使用条件模板。

<template if="{{smallScreen}}">
  // things to show when smallScreen is true
</template>
<template if={{!smallScreen}}">
  // things to show if smallScreen is false
</template>

任何人都可以帮我理解聚合物核心媒体查询吗？

1 个答案: