サイズに応じて応答するカスタムタイル

Question

以下の画像のように、これらのカスタムタイルを内部に作成しました。タイルに表示されるテキストにはかなりのバリエーションがありますが、全体のサイズなどは同じです。ここで問題となるのは、ブラウザのウィンドウのサイズが縮小するにつれて、これらのタイルは、テキストが消えたり位置をずらしたりして、不自然になります。私が試して欲しいのは、画面が小さくなるにつれて、4を連続して表示するのではなく、768pxのブレークポイントで2、480pxの最小で1を表示することです。画像は今そこにあるものを示しています。

し、それが収縮として、あなたはそれを台無しに取得する方法を見ることができます：

は私が助けるためにブートストラップを使用していますが、とフルサイズで

これらを越えなければならなかった。私が言ったように、いくつかのバリエーションがあり、これらはAngular内のテンプレートエンジンを使用して作成されます。以下のいくつかはhtmlのコード、テンプレートの呼び出し、テンプレート自体。その後、CSSを表示します。

私はこれを手助けするために何ができますか？

テンプレートカード：

<div class="beneTile" ng-if="benefit.planTypeId==2"> 
    <span ng-show="benefit.isPending"><card template2 ng-model="benefit"></card></span> 
    <span ng-show="!benefit.isPending"> 
    <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}"> 
     <card template2 ng-model="benefit"></card> 
    </a></span> 
</div> 
<div class="beneTile" ng-if="benefit.planTypeId==3"> 
    <span ng-show="benefit.isPending"><card template3 ng-model="benefit"></card></span> 
    <span ng-show="!benefit.isPending"> 
    <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}"> 
     <card template3 ng-model="benefit"></card> 
    </a> 
    </span> 
</div> 

とテンプレート：

<!-- template2.html --> 
<script type="text/ng-template" id="template2.html"> 
    <div class="beneHead T4"> 
     <p>{{ item.name }}</p> 
     <div> 
      <span>{{ item.beginDate|date : 'MM/dd/yyyy' }} - </span><span>{{ item.endDate|date : 'MM/dd/yyyy' }}</span> 
     </div> 
    </div> 
    <div class="beneDetails"> 
     <div> 
      <span class="col-md-6 beneImg"><img src="ppt/assets/beneTiles/HRA.svg"></span> 
     </div> 
     <div class="beneText"> 
      <p class="beneDesc">Current Balance</p> 
      <p class="beneMoney">{{ item.balance | currency }}</p> 
      <p class="beneDesc">Annual Benefit</p> 
      <p class="beneMoney">{{ item.annualAmt | currency }}</p> 
     </div> 
     <div class="beneFooter"> 
      <p><span class="footerStatic">Last day to incur expenses:</span> <span class="footerDynamic">{{ item.lastIncurDate|date : 'MM/dd/yyyy' }}</span></p> 
      <p><span class="footerStatic">Last day to submit claims:</span> <span class="footerDynamic">{{ item.lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p> 
     </div> 
    </div> 
</script> 

<!-- template3.html --> 
<script type="text/ng-template" id="template3.html"> 
    <div class="beneHead"> 
     <p>{{ item.name }}</p> 
     <div> 
      <span>{{ item.beginDate|date : 'MM/dd/yyyy' }} - </span><span>{{ item.endDate|date : 'MM/dd/yyyy' }}</span> 
     </div> 
    </div> 
    <div class="beneDetails"> 
     <div> 
      <span class="col-md-6 beneImg"><img src="ppt/assets/beneTiles/Parking.svg"></span> 
     </div> 
     <div class="beneText"> 
      <p class="beneDesc">Current Balance</p> 
      <p class="beneMoney">{{ item.balance | currency }}</p> 
      <p class="beneDesc">Annual Election</p> 
      <p class="beneMoney">{{ item.annualAmt | currency }}</p> 
     </div> 
     <div class="beneFooter"> 
      <p><span class="footerStatic">Last day to incur expenses:</span> <span span class="footerDynamic">{{ item.lastIncurDate|date : 'MM/dd/yyyy' }}</span></p> 
      <p><span class="footerStatic">Last day to submit claims:</span> <span span class="footerDynamic">{{ item.lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p> 
     </div> 
    </div> 
</script> 

そして、それはすべてのために今CSS：

.beneTile { 
    height: 245px; 
    width: 245; 
    border: 1px solid #999999; 
} 

@media only screen and (max-width: 767px) { 
    .beneTile { 
     height: 245px; 
     width: 245px; 
    } 
} 

@media only screen and (max-width: 500px) { 
    .beneTile { 
     height: 245px; 
     width: 100%; 
    } 
} 

.beneTile:hover { 
    cursor: pointer; 
} 

.beneHead { 
    background-color: #8a8c8e; 
    height: 90px; 
    text-align: center; 
    padding-top: 20px; 
} 

.beneHead > p { 
    line-height: 20px; 
    color: #ffffff; 
    font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; 
} 

.beneHead > div > span { 
    font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; 
    line-height: 20px; 
    color: #ffffff; 
} 

.T1 { 
    background-color: #8a8c8e; 
} 

.T1:hover { 
    background-color: #5a5b5d; 
} 

.T2 { 
    background-color: #ab2328; 
} 

.T2:hover { 
    background-color: #68070b; 
} 

.T3 { 
    background-color: #2dccd3; 
} 

.T3:hover { 
    background-color: #24a4a9; 
} 

.T4 { 
    background-color: #ffb500; 
} 

.T4:hover { 
    background-color: #fc9a26; 
} 

.beneHead > p { 
    margin: 0px; 
    font-size: 17px; 
} 

.beneHead span { 
    font-size: 14px; 
} 

.beneDetails { 
    color: #000000; 
    height: 155px; 
    padding-top: 10px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

.beneDetails > div> span > img { 
    height: 110px; 
    width: 120px; 
} 

.beneText { 
    margin: 0; 
} 

.beneDesc { 
    font-size: 12px; 
    text-align: right; 
    margin: 0; 
    line-height: 18px; 
} 

.beneMoney { 
    font-size: 17px; 
    color: #ab2328; 
    text-align: right; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    margin: 0; 
} 

.beneFooter > p, .beneFooter > span { 
    font-size: 12px; 
    clear: both; 
    line-height: 18px; 
} 

.beneFooter.footerStatic span { 
    text-align: left; 
} 

.beneFooter span.footerDynamic { 
    text-align: right; 
    float: right; 
} 

.beneFooter p span { 
    font-size: 11px; 
    line-height: 11px; 
    margin: 0px; 
} 

私は長い記事を実現し、うまくいけば、私は提供私が何を持っているのか、どこに行くのかを理解するのに十分です。助けを前にありがとう！

Answer 1

あなたがここにheightを固定している：

@media only screen and (max-width: 767px) { 
    .beneTile { 
     height: 245px; 
     width: 245px; 
    } 
} 

@media only screen and (max-width: 500px) { 
    .beneTile { 
     height: 245px; 
     width: 100%; 
    } 
} 

ではなくheight: auto;を使用してみてください、それは良いことがあります。