Question

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>

Answer 1

好的，所以你想让卡片放在中间位置，并且在卡片离开屏幕之前，行长度要小一些。

您需要媒体查询和一些数学： - ）

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

让我们说我们永远不想连续显示超过4张卡片，这意味着我们从不希望“卡片视图”具有更大的4x310px（1240px）

当我们的空间小于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/

的链接

如何使这个聚合物应用程序响应？

1 个答案: