gpt4 book ai didi

css - 如何在 Polymer Project 1.0 中实现容器或网格之类的东西 - 如何实现?

转载 作者:技术小花猫 更新时间:2023-10-29 11:24:11 24 4
gpt4 key购买 nike

我想使用 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-layoutiron-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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com