Question

我目前正在努力使用聚合物中的core-media-query元素设置响应式网页。我有一个带有两个子元素的简单div容器，我希望在大屏幕上水平对齐，在小屏幕上垂直对齐（例如电话）。我在文档中使用了Auto-vertical example，但没有让它为我工作。

我也尝试过不同的方法：

<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div layout {{phoneScreen ? vertical : horizontal}}>
  <div>Alpha</div>
  <div>Beta</div>
  <div>Gamma</div>
</div>

但这对我来说似乎也不起作用。

任何人都知道如何正确使用core-media-query - 元素？

Answer 1

这是一个有效的例子。在http://jsbin.com/lufewa有一个实时版本（我无法使用SO代码运行器嵌入此版本，因为您无法调整输出窗口的大小。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer core-media-query Demo</title>
  </head>

  <body>
    <script src="//www.polymer-project.org/webcomponents.js"></script>
    <link rel="import" href="//www.polymer-project.org/0.5/components/core-media-query/core-media-query.html">

    <template is="auto-binding">
      <core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
      <div layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}">
        <div>Alpha</div>
        <div>Beta</div>
        <div>Gamma</div>
      </div>
    </template>
  </body>
</html>

我不认为您尝试使用的{{phoneScreen ? vertical : horizontal}}通常会用于包含/省略布尔属性。

我的例子与in the docs非常匹配，我想象一下，如果你原来不能使它工作，那可能是因为它不是一个聚合物元素，并没有包裹在<template is="auto-binding">？

用于响应式布局的聚合物核心 - 媒体 - 查询元素

1 个答案: