用於響應式佈局的聚合物核心媒體查詢元素

我目前在使用來自聚合物的核心媒體查詢元素來設置響應式網頁。我有一個簡單的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

用於響應式佈局的聚合物核心媒體查詢元素

回答

相關問題