關(guān)鍵要點(diǎn)

• 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)和表格並非完美契合，但由於其結(jié)構(gòu)穩(wěn)定，功能比較表格仍有改進(jìn)空間。
• 成功的響應(yīng)式功能比較表格應(yīng)輕鬆區(qū)分產(chǎn)品、清晰標(biāo)識(shí)功能，並顯示產(chǎn)品功能是否存在。
• 創(chuàng)建響應(yīng)式功能比較表格的兩種方案包括：使用Flexbox（現(xiàn)代瀏覽器支持率超過(guò)80%，包括需要前綴的瀏覽器版本在內(nèi)支持率達(dá)93%）和使用額外的標(biāo)記和ARIA 角色（更適合舊版Android 和iOS）。
• 無(wú)論選擇哪種方案，在設(shè)計(jì)響應(yīng)式功能比較表格時(shí)，都必須考慮可讀性、可訪問(wèn)性和可用性，確保其對(duì)所有用戶（包括殘疾用戶）友好且易於訪問(wèn)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與表格並非最佳拍檔。許多人對(duì)此進(jìn)行了研究，並設(shè)計(jì)了許多方法（其中一些方法最近在 SitePoint 上的一篇文章中進(jìn)行了總結(jié)）。然而，我們距離完美的解決方案還有很長(zhǎng)的路要走，搜索仍在繼續(xù)。

雖然通用情況仍然很複雜，但某些特定情況可以得到更多關(guān)注。我在這裡談?wù)摰氖枪δ鼙容^表。我們?cè)谠S多地方都能遇到它——在選擇汽車並試圖決定選擇哪些額外選項(xiàng)時(shí)；在比較套餐和功能的網(wǎng)站託管網(wǎng)站上；在任何允許您決定需要哪些功能以換取金錢的基於會(huì)員制的門戶網(wǎng)站上。

由於這種表格具有相對(duì)穩(wěn)定和一致的結(jié)構(gòu)，因此在小屏幕上顯示時(shí)，可以更好地控制其行為。

功能比較表的結(jié)構(gòu)

經(jīng)典的比較表將至少三個(gè)產(chǎn)品（顯示在列中）放在一起，而功能則顯示在下面的行中。在傳統(tǒng)結(jié)構(gòu)中，每行的第一個(gè)單元格包含功能的名稱，而每個(gè)產(chǎn)品下的單元格則包含複選標(biāo)記或其他一些符號(hào)，顯示該功能是否屬於該產(chǎn)品。我們可以找到這種經(jīng)典結(jié)構(gòu)的絕佳示例：這裡、這里和這裡。

根據(jù)這些示例，我們可以使用以下代碼總結(jié)比較表的結(jié)構(gòu)：

<table>
  <thead>
    <tr>
      <th></th>
      <th>產(chǎn)品 1</th>
      <th>產(chǎn)品 2</th>
      <th>產(chǎn)品 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>

很容易識(shí)別前面提到的元素：產(chǎn)品名稱、功能名稱以及顯示功能是否存在或不存在的標(biāo)記。請(qǐng)注意，? 代碼表示複選標(biāo)記 (?) 字符。

現(xiàn)在我們來(lái)到了問(wèn)題的根源。為了使表格在低屏幕寬度下保持最佳效率，必須滿足以下幾個(gè)條件：

• 用戶必須能夠輕鬆區(qū)分產(chǎn)品；
• 功能必須易於識(shí)別；並且
• 必須清楚產(chǎn)品的功能是否存在。

實(shí)現(xiàn)此結(jié)果的最佳方法是將包含功能名稱的單元格移到標(biāo)記功能存在或不存在的其他三個(gè)單元格的頂部。

方案一：Flexbox

我們?nèi)绾巫龅竭@一點(diǎn)？一個(gè)答案是 Flexbox。如果您不知道 Flexbox 是什麼，或者需要復(fù)習(xí)一下，您可以查看 Nick Salloum 最近關(guān)於此主題的文章。我們其他人可以深入研究解決方案。

首先，我們需要確保我們的更改僅在小屏幕上發(fā)生。為此，我們使用媒體查詢來(lái)定位我們的代碼，使用 768 像素的經(jīng)典寬度作為斷點(diǎn)：

<table>
  <thead>
    <tr>
      <th></th>
      <th>產(chǎn)品 1</th>
      <th>產(chǎn)品 2</th>
      <th>產(chǎn)品 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>

這組規(guī)則中有一些重要的事情可以實(shí)現(xiàn)神奇的效果：

• 我們將表格行的 display 值更改為 flex，並告訴其子元素以行方式均勻分佈。
• 接下來(lái)，我們指示單元格採(cǎi)用 display:block 來(lái)將它們規(guī)範(fàn)化為普通容器（保留默認(rèn)值會(huì)帶來(lái)表格規(guī)則的干擾，尤其是在大小方面）。
• 下一步是定位每行中的第一個(gè)單元格，使其寬度為 100%，並更改背景顏色，以增強(qiáng)對(duì)比度。流程規(guī)則使其保持在其他三個(gè)單元格的頂部——這正是我們需要的。
• 我們通過(guò)隱藏第一個(gè) th 來(lái)完成更改，這樣產(chǎn)品名稱上方就不會(huì)顯示任何內(nèi)容。

此處可以查看演示。

顯然，解決方案的有效性僅取決於其支持程度。根據(jù) caniuse.com 的數(shù)據(jù)，對(duì)於大多數(shù)現(xiàn)代變體，F(xiàn)lexbox 的支持率超過(guò) 80%，如果我們包括需要前綴或使用規(guī)則的先前版本的瀏覽器版本，則支持率超過(guò) 93%。 IE 的支持從 IE10 開(kāi)始（只有 2012 年的語(yǔ)法），而 IE11 則完全支持。因?yàn)槲覀冎饕P(guān)注小屏幕上的支持，所以我們可以忽略對(duì)先前 IE 版本的支持缺乏。在移動(dòng)方面，支持從 Android 4.4 和 iOS 7.1 開(kāi)始。以前的版本需要供應(yīng)商前綴並且不支持 wrap 功能。

您還應(yīng)該提供後備方案，例如 Bootstrap 中使用的滾動(dòng) div。這樣，超出支持範(fàn)圍的訪問(wèn)者仍然會(huì)有另一種顯示替代方案。

方案二：額外的標(biāo)記 ARIA 角色

如果您要支持的大部分瀏覽器都不支持 Flexbox，則存在替代方案。事實(shí)上，這是我在 2013 年的一個(gè)真實(shí)項(xiàng)目中使用的解決方案。我們需要一些額外的標(biāo)記：我們必須添加一行額外的行，複製功能名稱。雖然手工操作可能顯得乏味，但如果從數(shù)據(jù)源讀取信息，則可以自動(dòng)完成。最後，我們初始示例中的代碼應(yīng)如下所示：

@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;
  }
}

CSS 也非常簡(jiǎn)單：

<table>
  <thead>
    <tr>
      <th></th>
      <th>產(chǎn)品 1</th>
      <th>產(chǎn)品 2</th>
      <th>產(chǎn)品 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>

為了提高可訪問(wèn)性，我們可以更進(jìn)一步，使用 aria-hidden="true" 從屏幕閱讀器中隱藏額外的標(biāo)記。這樣，那些尊重 aria-hidden 規(guī)範(fàn)的屏幕閱讀器應(yīng)用程序就不會(huì)兩次讀取重複的內(nèi)容。

這是第二個(gè)解決方案的演示。

結(jié)論

我們?cè)谶@裡找到了兩種方法來(lái)使比較表真正具有響應(yīng)性。兩者都有其優(yōu)缺點(diǎn)。最終，選擇的方案應(yīng)取決於您的受眾群體。對(duì)於大多數(shù)情況，第一個(gè)選項(xiàng)（帶有後備方案）應(yīng)該足夠了。如果您確實(shí)需要迎合舊版 Android 和 iOS，您可以部署第二個(gè)選項(xiàng)。無(wú)論哪種方式，從現(xiàn)在開(kāi)始，您的功能比較表看起來(lái)都會(huì)好得多，無(wú)論屏幕尺寸如何。

(此處省略了原文檔中的FAQ部分，因?yàn)樵摬糠謨?nèi)容與偽原創(chuàng)目標(biāo)不符，且篇幅過(guò)長(zhǎng)。如果需要，可以單獨(dú)處理FAQ部分的偽原創(chuàng)。)

以上是功能比較表的響應(yīng)解決方案的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！