0

https://gdg-test-ch.firebaseapp.com/

一排有三张牌，但右边有一些空白。在移动视图中，空间变得更大。工具栏或导航栏也适合浏览器。

我怎样才能让它响应？

Card-view.html（卡片元素）

<link rel="import" href="../bower_components/polymer/polymer.html">
  <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
  <link rel="import" href="../bower_components/paper-button/paper-button.html">
  <link rel="import" href="../bower_components/paper-card/paper-card.html">
  <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" />




  <dom-module id="card-view">


    <template>

      <style include="iron-flex iron-flex-layout">
        /* local styles go here */
        :host {
          display: block;
          max-width: 1450px;
        }
        .card {
          width: 300px;
          margin-left: 5px;
          margin-right: 5px;
          margin-bottom: 5px;
          margin-top: 5px;
        }
      </style>

      <!-- local DOM goes here -->
      <div class="container flex layout horizontal wrap">

<template is="dom-repeat" items="{{list}}">
        <div class="card">
          <paper-card heading="{{item.first}}" image="../image/{{item.last}}.jpg">

            <div class="card-actions">
                <paper-button>Explore!</paper-button>
              <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
               alt="octocat" title="octocat"></paper-icon-button>

            </div>
          </paper-card>
        </div>

</template>

      </div>
    </template>

    <script>
      Polymer({
        is: 'card-view',
        ready: function() {
            this.list = [
                {first: 'Bob', last: 'i'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'}


            ];
          }
      });
    </script>

  </dom-module>

Index.html（主页）

<!DOCTYPE html>
<html>
<head>
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="elements/card-view.html" />
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html" />

</head>




 <body>
<style>
a,.anchor-like,
.markdown-html a{
  color: var(--default-primary-color);
  text-decoration:none;
}
body {
  background-color: #FF5722;
}
</style>
<paper-toolbar>
  <span class="title">Title</span>
</paper-toolbar>
<card-view></card-view>






</body>

</html>
4

1 回答 1

1

好的，所以你想让卡片放在中间，并且在卡片离开屏幕之前让行长变小。

你想要媒体查询和一些数学:-)

每张卡片的宽度为 300 像素 + 边距为 5 像素（每边），这意味着每张卡片在屏幕上占用 310 像素的空间。

假设我们永远不想连续显示超过 4 张卡片，这意味着我们永远不希望“卡片视图”具有更大的 4x310 像素（1240 像素）

当我们的空间小于 1240 像素时，我们想更改为 3x310 像素，依此类推。

card-view {
  display: block;
  margin: 0 auto;
}

@media screen and (min-width: 1240px) {
  card-view {
    width: 1240px;
  }
}

@media screen and (min-width: 930px) and (max-width: 1239px) {
  card-view {
    width: 930px;
  }
}

@media screen and (min-width: 620px) and (max-width: 929px) {
  card-view {
    width: 620px;
  }
}

@media screen and (min-width: 310px)  and (max-width: 619px) {
  card-view {
    width: 310px;
  }
}

这是概念的链接https://jsfiddle.net/link2twenty/bzr9wt00/

于 2016-05-06T14:52:32.580 回答