このポリマーアプリを反応させるには？

https://gdg-test-ch.firebaseapp.com/このポリマーアプリを反応させるには？

行には3つのカードがありますが、右側には空きスペースがあります。モバイルビューではスペースが大きくなります。また、ツールバーやナビゲーションバーはブラウザに適しています。

どのように反応させることができますか？

カード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

OK、あなたはカードを真ん中にして放置したいです行の長さは、カードが画面から消える前に小さくなるようにします。各カードには、300ピクセル+（各側）5pxのマージンの幅を有する

:-)あなたはメディアクエリと、いくつかの数学たい

は、それぞれ1を意味し、画面上のスペースの310pxを占めます。

私たちは「カードビュー」をたくない、我々は宇宙の1240px未満を持っているとき4x310pxのと大きい（1240px）

を持っていることを意味し、行に4枚以上のカードを表示したくないとしましょう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

このポリマーアプリを反応させるには？

答えて

関連する問題