1

テーブルを使用して、デスクトップ版の Web サイトでデータのリストをテーブルに表示しようとしています。モバイル Web についても同じことを要約したいと思います。HTML の別のブロックを使用する必要がありますか、それとも現在のテーブルをモバイル ビュー用に変換できますか。

http://play.mink7.com/h/startupsradar/pending.html

モバイルでの次のリスト ビューが気に入っています

ここに画像の説明を入力

更新 回答に従ってコードを変更しました。リスト全体を1つのブロックとしてクリックできるようにする方法はありますか?

4

5 に答える 5

3

HTMLtableを別のレンダリングに変えることができます（例：設定）

table { display: block; }
tr { display: table; }
th, td { display: table-row; }

これにより、完全に垂直なプレゼンテーションが発生します。

もちろん、詳細はマークアップと目的のレンダリングによって異なります。

于 2012-07-29T08:02:39.027 に答える
3

media="screen and (max-device-width: /* whatever */)"次のようなハンドヘルド固有のスタイルシート属性を使用して、同じブロックを変換できます。

<link rel="stylesheet" href="whatever.css" type="text/css" media="screen and (max-device-width: /* whatever */)">

または@media、スタイルシート内で使用できます

@media only screen and (max-device-width: /* whatever */) {
    /* Styles goes here */
}

メディア情報

PS nike.comのソースを見たところです。彼らは ipad.css スタイルシートの stylesheet 属性を使用しています。

于 2012-07-29T07:39:11.320 に答える
1

CSS3が受け入れられる場合は、メディアクエリを使用して、さまざまなサイズやデバイスにさまざまなスタイルを作成できます。この方法で、非常に動的なサイトを作成できます。

于 2012-07-29T08:00:23.763 に答える
1

一般に、テーブル データはテーブルの行を望ましくない長さに引き延ばし、テーブルの行の範囲を超えてしまう可能性があります。モバイル デバイスを扱う場合、px が制限されます。既存の CSS スタイルシートのコピーを作成し、それを編集して、サイトがモバイルに切り替わったときのテーブルの最小/最大幅を設定することができます。 

max-width: __px;  
min-width: __px; 
etc.

または、CSS を追加するモバイル サイトへの切り替えのイベントで JS 関数を呼び出すことができます。

$('#tableName').css('max-width', '150px');
$('#tableName').append(div).css('max-width', '150px');

JS バージョンは少しやりにくいかもしれませんが、CSS に制限を設定する必要があると思います。

于 2012-07-29T08:18:54.883 に答える