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

我目前在使用来自聚合物的核心媒体查询元素来设置响应式网页。我有一个简单的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 -Element的想法？

来源

2014-12-04 Julian Pr

下面是一个工作示例。有在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">？

来源

2014-12-04 20:27:17

该示例网站不适用于我在Chr ome，由于跨站点安全限制。 – 2014-12-19 15:38:08

抱歉，看起来像我粘贴了错误的jsbin网址。我已更新该帖子以反映正确的网址，即http://jsbin.com/lufewa – 2014-12-19 17:15:33

仍然无效... – ironic 2015-04-19 11:12:04

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

回答

相关问题