如何讓我的表格/頁面變成響應式的？

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

您需要使用「vw」或「vh」，它基本上是您的查看寬度的1％，查看高度是一個縮放比例而不是像素。它目前由大多數網絡瀏覽器支持，因此兼容性不應該擔心。

例如：

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

和

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