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

https://gdg-test-ch.firebaseapp.com/如何使这个聚合物应用程序响应？

连续有三张卡片，但右侧有一些空白空间。在移动视图中，空间变大。此外，工具栏或导航栏适合浏览器。

我该如何让它响应？

卡-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>

来源

2016-05-06 Nijinsha Rahman

好了，你想使卡坐中间，为在卡片离开屏幕之前，行长变得更小。

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

每张卡都有的300像素+一个5px的保证金（每边）的宽度，这意味着每一个占用310px的空间在屏幕上。

比方说，我们不希望在一排，这意味着我们不希望“卡视图”显示超过4卡有4x310px更大（1240px）

，当我们有小于1240px的空间我们想要更改为3x310px等等。

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-06 14:52:32

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

回答

相关问题