为什么我的网站在电脑和移动设备上调整大小不同？

Question

我一直在为一个学校项目开发一个网站，并为我的表格添加了更改大小的代码。当我编码时，我经常调整浏览器窗口的大小以检查移动设备上的大小。看起来棒极了！当我实际在移动设备上打开该网站时，它的大小完全不同。我有一段时间遇到了这段代码的问题。尺寸调整不是很灵敏，边距也效果不佳。 这是代码（CSS）：

.move{
}

 .table3 {
    position: absolute;
        left: 50%;
     transform: translate(-50%, -90%);
        border-collapse: collapse;
        width: 700px;
        height: 200px;
        border: 1px solid #bdc3c7;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
    }
    
    .tr {
        transition: all .2s ease-in;
        cursor: pointer;
    }
    
    .th,
    .td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    #top {
        background-color: rgb(98,98,98);
        color: rgb(255,255,98);
    }
    
    .h1 {
        font-weight: 900;
      font-size: calc(1.725rem + 2.3vw);
        text-decoration: underline;
        text-align: center;
        color: rgb(224,194,58);
        padding: 10px;
      margin-bottom: 250px;
      margin-top: 110px;
    }
      .h2 {
        font-weight: 900;
      font-size: calc(1.725rem + 2.3vw);
        text-decoration: underline;
        text-align: center;
        color: rgb(224,194,58);
        padding: 10px;
      margin-bottom: 200px;
      margin-top: 110px;
    }
    .tr:hover {
        background-color: #f5f5f5;
        transform: scale(1.02);
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
    }
    
    @media only screen and (max-width: 768px) {
        .table3 {
            width: 90%;
           transform: translate(-50%, -70%);
        }
      .h1{
        margin-bottom: 370px;
      }
       .h2{
        margin-bottom: 240px;
      }
    }

    @media only screen and (max-width: 468px) {
        .table3 {
            width: 90%;
           transform: translate(-50%, -90%);
        }
      .h1{
        margin-bottom: 370px;
      }
       .h2{
        margin-bottom: 240px;
      }
    }

这是我的 HTML：

<div class="move">  <h1 class="h1">Cost Overview</h1>

    <table class="table3">
        <tr class="tr" id="top">
           <th class="th">Step</th>
            <th class="th">Service</th>
            <th class="th">Provider</th>
            <th class="th">Average Cost</th>
        </tr>
        <tr class="tr">
            <td class="td">1 </td>
            <td class="td">Drivers Education Course </td>
            <td class="td">Varies </td>
            <td class="td">$25 - $60 </td>

        </tr>
        <tr class="tr">
            <td class="td">2 </td>
            <td class="td">Permit Exam </td>
            <td class="td">California DMV </td>
            <td class="td">$37 </td>

        </tr>
        <tr class="tr">
            <td class="td">3 </td>
            <td class="td">Behind The Wheel Class </td>
            <td class="td">Varies </td>
            <td class="td">$350 - $650 </td>

        </tr>
        <tr class="tr">
            <td class="td">4 </td>
            <td class="td">Practice Driving </td>
            <td class="td">Lisenced Driver 25+ Years Old</td>
            <td class="td">$0 </td>

        </tr>
        <tr class="tr">
            <td class="td">5 </td>
            <td class="td">Behind The Wheel Exam </td>
            <td class="td">California DMV </td>
            <td class="td">$0 - $7 </td>

        </tr>

    </table>
  </div>

我对任何事情都持开放态度，有没有办法让表格的两侧和书写之间自动留出20px的边距？

Answer 1

你能告诉我我们需要哪种计算机语言来制作一个漂亮的网站吗？