Question

正如标题所示，我想让我的桌子成为一个响应式的桌面，以便它可以在移动设备或桌面上自动调整。这是我的代码：

article, aside, figure, footer, header,
menu, nav, section { display: block; }
body {
    font-size: 1em;
}

h2 {
    font-size: 100%;
    font-weight: bold;
    text-align: center;
}

h3 {
    font-size: 100%;
    font-weight: bold;
    color: red;
    text-align: center;
}

td {
    min-width: 150px;
    width: 150px;
    text-align: center;

    border: 2px solid #ccc;
    vertical-align: top;
}

th {
    border: 2px solid #cccccc;
}

<table>
    <thead>
    <tr>
        <th>User ID</th>
        <th>Website</th>
        <th>Time</th>
        <th>Data Usage</th>
        <th>Total Data Usage</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><h2><span style="cursor:pointer">Luke</span></h2></td>
        <td><p>Facebook</p><p>Youtube</p></td>
        <td><p>10.00am</p><p>1.30pm</p></td>
        <td><p>3mb</p><p>1gb</p></td>
        <td><h3>1.3gb</h3></td>
    </tr>
    <tr>
        <td><h2><span style="cursor:pointer">John</span></h2></td>
        <td><p>Facebook</p><p>Youtube</p></td>
        <td><p>10.00am</p><p>1.30pm</p></td>
        <td><p>3mb</p><p>1gb</p></td>
        <td><h3>1.3gb</h3></td>
    </tr>
    <tr>
        <td><h2><span style="cursor:pointer">Peter</span></h2></td>
        <td><p>Facebook</p><p>Youtube</p></td>
        <td><p>10.00am</p><p>1.30pm</p></td>
        <td><p>3mb</p><p>1gb</p></td>
        <td><h3>1.3gb</h3></td>
    </tr>
    </tbody>
</table>

我尝试过使用JQuery，但我想我可能做错了哈哈。任何帮助将不胜感激！

Answer 1

你需要使用＆＃34; vw＆＃34;或＆＃34; vh＆＃34;它基本上是观看宽度的1％，观看高度是刻度而不是像素。目前大多数网络浏览器都支持它，因此兼容性不应该让人担心。

例如：

#test {
 width:25vw;
 height:25vh;
 position:absolute;
 top:25vw;
 left:25vh;
 background-color:rgba(127,127,127,0.5);
}

和

<div id="test"></div>

如何让我的桌子/页面成为响应式的？

1 个答案: