0

表示する必要があるテーブルがあります。デスクトップでは、4 行 10 列というシンプルなものです。

<table width='100%'>
<thead>
<tr><th colspan='10'>Size Chart (inches)</th></tr>
<tr><th>Size</th><th>6</th><th>8</th><th>10</th><th>12</th><th>14</th><th>16</th><th>18</th><th>20</th><th>22</th></tr>
</thead>
<tbody>
<tr><td class='head'>Bust</td><td class='odd'>35&#xbd;</td><td>36&#xbd;</td><td class='odd'>37&#xbd;</td><td>39</td><td class='odd'>40&#xbd;</td><td>42&#xbd;</td><td class='odd'>44&#xbd;</td><td>46&#xbd;</td><td class='odd'>48&#xbd;</td></tr>
<tr><td class='head'>Waist</td><td class='odd'>27&#xbd;</td><td>28&#xbd;</td><td class='odd'>29&#xbd;</td><td>31</td><td class='odd'>32&#xbd;</td><td>34</td><td class='odd'>36</td><td>38</td><td class='odd'>41&#xbd;</td></tr>
<tr><td class='head'>Hips</td><td class='odd'>38&#xbd;</td><td>39&#xbd;</td><td class='odd'>40&#xbd;</td><td>42</td><td class='odd'>43&#xbd;</td><td>45&#xbd;</td><td class='odd'>47&#xbd;</td><td>49&#xbd;</td><td class='odd'>52</td></tr>
</tbody>
</table>

ただし、小さい画面では、この 90% をピボットして、10 行と 4 列にする必要があります。

サーバー側でこれを行うこともできますが、その場合は画面サイズを知る必要があるため、ブラウザのスニッフィングを許可する必要があります。これは多くの四半期で嫌われています.

これは JavaScript で行うこともできますが、JavaScript 以外のユーザーは苦しむことになります。（これは私に関係するべきことですか？）

css の「コンテンツ」プロパティを使用して、メディア クエリを使用してテーブルを挿入することもできると思いますが、それはあまりにも間違っているように思えます。

サイズチャートは、ターゲットオーディエンスのアイデアを提供するために、eコマースサイトに表示される予定です.

任意の提案をいただければ幸いです。理想的には、HTML5/CSS のみのソリューションが必要です。間違っているように見える「コンテンツ」を使用せずに、そのようなものは存在しますか?

4

3 に答える 3

3

The simplest thing would probably be to put the table in your HTML twice, once in 4x10 format and once in 10x4 format. Then you can use a simple media query to control which of the two tables is displayed and which is hidden based on the width of the device.

于 2013-02-01T00:06:15.837 に答える
0

このフレームワークが必要なものに適合するように思われるので、Bootstrapを確認することを強くお勧めします。基本的な概念は、モバイルデバイスにも対応するブラウザのウィンドウサイズに応じてグリッドのサイズを適切に変更することです。

流体グリッドシステム

最近のほとんどのブラウザとモバイルデバイスはJavaScriptをサポートしています（ユーザーがJavaScriptを無効にすることを決定した場合を除く）。ブラウザの幅を書き直して把握する代わりに、ツールを使用して、アプリ自体の他の重要な側面に集中できるようにすることもできます。

于 2013-02-01T00:15:55.050 に答える
0

Unfortunately differentiating the view based on the screen resolution using only CSS/HTML5 is not possible.

The best solution is to use javascript to detect the size of the window and then doing one of the following:

  1. Render both tables (10x4, and 4x10) and changing which one is visible depending on the width of the page. I would apply a class like "wideBody" or "tallBody" on the body of the page and then having a class like "wideContent" on the table that is wide and "tallContent" on the table that is tall. Selectively apply this class to the body of the page depending on the width - and in CSS do this:

    .tallBody .wideContent, .wideBody .tallContent { display: none; }

  2. Forward to a different page that is mobile friendly (assuming you are targeting mobile users)

于 2013-02-01T00:04:23.470 に答える