作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我想使用 Polymer Starter Kit + 预构建的 polymer 元素创建一个响应式网站。
现在,如何在像 bootstrap 这样的 css 框架中实现容器或网格之类的东西?
仅使用 Polymer 是否可行,或者我唯一的选择是我自己的自定义代码,或者像 skeleton、bourbon neat 等框架/网格系统?
我试着查看 iron-flex-layout,但它不会像较小屏幕尺寸上的网格那样相互折叠,您可以在这里看到:
http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview
<div class="horizontal layout" style="height:100%">
<div class="flex-1">
Left column
</div>
<div class="flex-4">
Right column
</div>
</div>
它不会“折叠”,因此如果您调整窗口大小时框将彼此重叠,它只会缩放。
那么,我该如何处理呢?
编辑:我想实现这样的目标: http://www.bootply.com/4CJ9GOYEuH
因此,如果您调整窗口大小,dics 将折叠到彼此的顶部,而不是彼此相邻。
最佳答案
您可以结合使用iron-flex-layout
和iron-media-query
。 Iron-media-query 将根据视口(viewport)大小进行更新,您可以将其媒体查询匹配绑定(bind)到其他元素。
天真地,您可以执行以下操作,但同样可以使用 queryMatches 为您的布局生成“flex-n”类。
<iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>
<template is="dom-if" if="{{queryMatches}}">
<div class="horizontal layout" style="height:100%">
<div class="flex-1">
Left column
</div>
<div class="flex-4">
Right column
</div>
</div>
</template>
<template is="dom-if" if="{{!queryMatches}}">
<div>Left column</div>
<div>Right column</div>
</template>
关于css - 如何在 Polymer Project 1.0 中实现容器或网格之类的东西 - 如何实现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32347536/
我是一名优秀的程序员,十分优秀!