1

我有一张数据表，需要在各种设备上显示，小到 320 像素宽的手机

我计划使用 css 媒体查询来检测浏览器窗口大小，并在响应版本通过 { display: block; 低于某个级别时显示响应版本。} 并隐藏标准版本。

响应式版本只会将列堆叠在一起。

我的问题是，我应该为响应式版本使用哪些 html 标签。目前我只是使用一堆功能但似乎不正确的 div。或者也许是？

<div class="standard_version">
    <table>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <td>4rq4</td>
            <td>vdg34</td>
            <td>xcb245</td>
            <td>12341234</td>
        </tr>
        <tr>
            <td>sdvxc4</td>
            <td>898fg</td>
            <td>sfasdf35</td>
            <td>451345</td>
        </tr>
        <tr>
            <td>asdfasf</td>
            <td>zxdfw</td>
            <td>1A2313</td>
            <td>9732</td>
        </tr>
    </table>
</div>


<div class="responsive_version">

    <div class="responsive_version_tr">
        <div class="responsive_version_th">Column A</div>
        <div class="responsive_version_th">Column B</div>
        <div class="responsive_version_th">Column C</div>
        <div class="responsive_version_th">Column D</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">4rq4</div>
        <div class="responsive_version_td">vdg34</div>
        <div class="responsive_version_td">xcb245</div>
        <div class="responsive_version_td">12341234</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">sdvxc4</div>
        <div class="responsive_version_td">898fg</div>
        <div class="responsive_version_td">sfasdf35</div>
        <div class="responsive_version_td">451345</div>
    </div>

    <div class="responsive_version_tr">
        <div class="responsive_version_td">asdfasf</div>
        <div class="responsive_version_td">zxdfw B</div>
        <div class="responsive_version_td">1A2313</div>
        <div class="responsive_version_td">9732</div>
    </div>

</div>

提前致谢！

4

2 回答 2

0

我不会使用表格，因为它们很难响应地重新排列。我会使用<ul>标签而不是<tr>和<li>'s 而不是<td>. 此外，如果您想走捷径，只需使用twitter-bootstrap作为您的 css 基础。然后有一个单独的样式表（包含在引导程序之后）来自定义它。但即使在引导表上，如果内容太大，他们也只会在移动设备上获得一个滚动条。

我会按照我描述的那样使用标记替换，用divwith包裹display: table;并给出tr display: table-row;andli display: table-cell;然后在您的移动媒体查询中更改这些样式。table如果您使用引导程序使其看起来不错，您可以给外部 div 一个类。

于 2013-10-01T21:48:59.970 回答
0

是的，Divs 可以正常工作。但是，您是否考虑过使用像Skeleton这样的预制 html/css 网格模板，甚至是像Bootstrap这样的完整框架？这些都是经过验证的，并且由于其庞大的用户群和支持，它们可能比您的更兼容。请参阅此 stackexchange 程序员关于“重新发明轮子”的帖子

于 2013-10-01T21:50:02.577 回答