0

画面の幅が増減するにつれて、変化する列数に入力を表示する良い方法を知っている人はいますか? たとえば、15 人いるとします。画面の幅が 1200 ピクセルの場合、15 人を 5 人ずつ 3 列に表示します。画面の幅が 800 ～ 1200 ピクセルの場合は、7 と 8 の 2 列を指定します。800 ピクセル未満の場合は、15 人のリストを 1 つだけ表示します。

jQuery または angularJS ソリューションを探しています。

4

2 に答える 2

0

サイズ変更イベントをリッスンするのは非常にコストがかかるため、一般的にangularjsまたはjavascriptではこれを行いません。css-media クエリを使用しないのはなぜですか?

@media(min-width: 1200px){
   td:nth-child(13+n){
     display: none;
   } 
   tr:nth-child(4+n){
     display: none;
   } 
}
@media(min-width: 800ox){
   td:nth-child(8+n){
     display: none;
   } 
   tr:nth-child(3+n){
     display: none;
   } 
}

本当にしたい場合は、次のようなものを使用できます: http://jsfiddle.net/GpLHZ/

ただし、データを処理する特定のコントローラーにリンクされたディレクティブまたはテーブルのディレクティブがより良いアプローチかもしれません。

于 2013-11-12T00:18:20.773 に答える
0

CSS3columnsプロパティをメディアクエリと組み合わせて使用​​して、それらを変更できます

于 2013-11-12T00:19:18.283 に答える