Responsive design 动态列数2

我正在使用Ionic 2构建一个移动应用程序，其中一个要求是，如果在平板电脑中显示，则一行显示4张卡，如果在手机中显示，则一行仅显示2张卡。我想知道实现这一点的最佳方法是什么？

你可以给它们一个最小宽度的宽度，让它们重新定位。差不多

.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);        
    }
}

---

如果你想通过angular应用它，你可以用*ngStyle来实现。只需创建一个字符串来匹配值，并运行一个*ngIf语句来应用单独的值。

我没有尝试过这一点，但您可能想在某个地方使用ionic平台，您可以在

元素上尝试类似的东西，您可以为iphone添加

[attr.width-50]

，为ipad添加

[attr.width-25]

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

它将返回true或false，然后相应地显示属性

---

有关更多信息，请查看

您能分享一些代码吗？你试过什么？

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  isIphoneOrIpad:boolean;  

  constructor(public platform: Platform) {
    this.isIphoneOrIpad = this.platform.is('iphone') || this.platform.is('ipad');
  }  
}