機能比較テーブルのレスポンシブソリューション-CSSチュートリアル-php.cn

Responsive Solutions for Feature Comparison Tables

キーポイント

レスポンシブなWebデザインとテーブルは完全に一致していませんが、安定した構造により、機能比較テーブルの改善の余地がまだあります。
成功した応答性関数比較テーブルは、製品を簡単に区別し、関数を明確に識別し、製品機能が存在するかどうかを示す必要があります。

レスポンシブWebデザインとテーブルは、最高のパートナーではありません。多くの人々がこれを研究し、多くの方法を設計しました（その一部は最近、SitePointの記事にまとめられました）。しかし、私たちはまだ完璧なソリューションから長い道のりであり、検索は続いています。

一般的な状況は依然として複雑ですが、いくつかの特定の状況はより多くの注意を引くことができます。ここで話しているのは、関数比較テーブルです。多くの場所で遭遇します。車を選択し、どの追加のオプションを選択しても、パッケージと機能を比較することができます。ポータルのお金と引き換えに。

このタイプのテーブルには比較的安定した一貫した構造があるため、小さな画面に表示されると、その動作をよりよく制御できます。

関数比較の構造表

クラシック比較テーブルは、少なくとも3つの製品（列に表示）を組み合わせて、下の行に関数が表示されます。従来の構造では、各行の最初のセルには関数の名前が含まれていますが、各製品の下のセルにはチェックマークまたは関数が製品に属するかどうかを示す他の記号が含まれています。この古典的な構造の素晴らしい例を見つけることができます。ここ、ここ、そしてここです。

これらの例に基づいて、次のコードを使用して、比較テーブルの構造を要約できます。

上記の要素を識別するのは簡単です：製品名、機能名、および関数が存在するか存在しないかを示すマーク。 ✔コードはチェックマーク（✔）文字を表すことに注意してください。

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

今、私たちは問題の根本にいます。テーブルが低画面幅で最適な効率を維持するには、次の条件を満たす必要があります。

ユーザーは製品を簡単に区別できる必要があります

関数は簡単に認識する必要があります

プラン1：FlexBox

これをどのように行いますか？答えの1つはFlexBoxです。 FlexBoxとは何か、またはレビューが必要な場合は、このトピックに関するNick Salloumの最近の記事をご覧ください。私たちの残りは解決策を掘り下げることができます。

まず、小さな画面でのみ変更が行われるようにする必要があります。これを行うには、メディアクエリを使用してコードを見つけます。

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

この一連のルールには、魔法の効果を達成できる重要なことがいくつかあります。

テーブル行の表示値を変更して屈曲し、その子要素を列に均等に配布するように伝えます。

次に、セルに通常のコンテナに正規化するように指示します（デフォルト値を保存すると、特にサイズの点でテーブルルールに干渉します）。
次のステップは、各行の最初のセルを100％幅の幅に配置し、コントラストを強化するために背景色を変更することです。プロセスルールは、他の3つのセルの上部に保持します。まさにそれが必要なものです。
製品名の上に何も表示されないように、最初のthを隠すことで変更を加えます。

ここでデモを表示できます。

明らかに、ソリューションの有効性は、サポートの程度にのみ依存します。 Caniuse.comによると、FlexBoxはほとんどの最新のバリエーションに対して80％以上のサポートを提供しており、プレフィックスを必要とするブラウザの以前のバージョンを含める場合、93％以上が93％を超えています。 IEサポートはIE10（2012 Syntaxのみ）で始まりますが、IE11はそれを完全にサポートしています。主に小さな画面でのサポートに焦点を当てているため、以前のIEバージョンのサポートの欠如を無視できます。モバイル面では、サポートはAndroid 4.4およびiOS 7.1から始まります。以前のバージョンにはベンダーのプレフィックスが必要であり、ラップ機能をサポートしませんでした。

また、ブートストラップで使用されるスクロールDIVなどのフォールバックオプションも提供する必要があります。これにより、サポート以外の訪問者にはまだ別のディスプレイの代替品があります。

スキーム2：追加のマーキングアリアの役割

サポートしたいほとんどのブラウザがFlexBoxをサポートしていない場合、代替手段があります。実際、これは2013年の実際のプロジェクトで使用したソリューションです。追加のタグが必要です。追加の行を追加し、関数名をコピーする必要があります。手動操作は退屈に見えることがありますが、データソースから情報を読むと、自動的に実行できます。最後に、最初の例のコードは次のようになります：

cssも非常に単純です：

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

ログイン後にコピー

アクセシビリティを改善するために、さらに一歩進んで、Aria-Hidden = "True"を使用して、スクリーンリーダーから追加のマーカーを非表示にすることができます。これにより、Aria-Hiddenの仕様を尊重する画面リーダーアプリケーションでは、複製コンテンツを2回読み取っていません。

<table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 1</td>
    </tr>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 2</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 3</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 4</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

これは、2番目のソリューションのデモです。

結論

比較テーブルを本当に反応させる2つの方法を見つけました。どちらにも利点と短所があります。最終的に、選択は視聴者に依存するはずです。ほとんどの場合、最初のオプション（フォールバックプランを使用）で十分です。 AndroidおよびiOSの古いバージョンに本当に対応する必要がある場合は、2番目のオプションを展開できます。いずれにせよ、機能の比較テーブルは、画面のサイズに関係なく、これからずっと良く見えます。

（元のドキュメントのFAQパーツはここでは省略されています。この部分の内容は擬似オリジナルの目標と一致せず、長すぎます。必要に応じて、FAQパーツの擬似原産性を処理できます別々に。）

以上が機能比較テーブルのレスポンシブソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。