Question

我正在使用Ionic 2构建一个移动应用程序，其中一个要求是如果在平板电脑中显示，则在一行中显示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 =＆＃34; 768px＆＃34;）或任何你需要设置它并在那里更改值。

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

如果您希望通过角度应用它，可以使用* ngStyle执行此操作。只需创建一个与值匹配的字符串，然后运行* ngIf语句即可应用单独的值。

Answer 2

我没有尝试过这个，但你可能想在某个地方使用离子平台，你可以试试<ion-col>元素，你可以为iphone添加[attr.width-50]，为ipad添加[attr.width-25]

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

然后，您可以使用Platform在相应的.ts文件中编写返回布尔值的逻辑。

import { Platform } from 'ionic-angular';

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

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

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

有关详细信息，请查看Ionic 2 Platform Documentation

列的动态数量Ionic 2

2 个答案: