動的な列数Ionic 2

Question

Ionic 2を使用してモバイルアプリを構築していますが、タブレットに表示されている場合は1行に4枚、モバイルに表示されている場合は2枚しか表示されません。私はこれを達成するための最善の方法は何だろうと思っていましたか？

Answer 1

基本的に、最小幅の幅を指定して、それらの位置を変更できるようにすることができます。何かのように

.card { 
    width: calc(100%/4); 
    min-width: calc(356px/2); // most minimum width of your container on a phone. 
} 

おそらくあなたの最良の賭けは、応答的なルートに行くことでしょう。 @media画面と（max-width = "768px"）を使用するか、設定する必要があるものを使用して値を変更してください。

.card { 
    width: calc(100%/4); 
} 
@media screen and (max-width:768px){ 
    .card { 
     width: calc(100%/2);   
    } 
} 

これは角度で適用したい場合は* ngStyleで行うことができます。値と一致する文字列を作成し、* ngIf文を実行して別々の値を適用します。

Answer 2

私はこれを試していないが、あなたはおそらくどこかで、あなたがiPad用iphoneと[attr.width-25]ため[attr.width-50]を追加することができます<ion-col>要素のような何かを試みることができるイオン性のプラットフォームを使用します。

<ion-col [attr.width-50]="isIphoneOrIpad" [attr.width-25]="!isIphoneOrIpad"> 

あなたはその後、プラットフォームを使用して、対応する.tsファイルに戻りブールのためのロジックを記述することができます。

これはtrueまたはfalseを返し、それに応じて属性を表示します。詳細については

チェックアウトIonic 2 Platform Documentation