html - 使动态大小调整表在窗口放大时锁定其大小

Question

我有一个用于小浏览器窗口的动态调整表。它调整大小很棒!它在 810px 下看起来不错，但问题是我希望它在超过 800px 时锁定表格的大小。现在当我超过 810px 时，我失去了 Arial 字体和边框折叠。我不知道为什么这不起作用!

请看看新的眼睛是否能发现正在发生的事情。

 #formatscreen {
  font-family: Arial;
  width: 800px;
  border-collapse: collapse;
}
th {
  background: black;
  color: white;
  font-size: 20px;
}
th,
td {
  border: 1px solid #000;
  border-bottom: 2px solid #fff;
  //    padding-left: 5px;
  //    padding-right: 5px;

}
#screen_symbol {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  display: inline-block
}
#screen_price {
  font-size: 32px;
  font-weight: bold;
  display: inline-block
}
#screen_net_pct {
  font-size: 24px;
  font-weight: bold;
  display: inline-block
}
#screen_expiry.header,
#screen_type.header,
#screen_dist.header,
#screen_short_leg.header,
#screen_long_leg.header {
  font-size: 20px;
  display: inline-block
}
#screen_change.header,
#screen_delta.header,
#screen_short_leg_vol.header,
#screen_long_leg_vol.header,
#screen_net.header {
  font-size: 14px;
  display: inline-block
}
#screen_expiry,
#screen_type,
#screen_dist,
#screen_short_leg,
#screen_long_leg {
  font-size: 24px;
  display: inline-block
}
#screen_change,
#screen_delta,
#screen_short_leg_vol,
#screen_long_leg_vol,
#screen_net {
  font-size: 16px;
  display: inline-block
}
@media only screen and (max-device-width: 480px),
(max-width: 810px) {
  #formatscreen {
    font-family: Arial;
    width: 100%;
    border-collapse: collapse;
  }
  th {
    background: black;
    color: white;
    font-size: 2.5vw;
  }
  th,
  td {
    border: 1px solid #000;
    border-bottom: 2px solid #fff;
    //  padding-left: 5px;
    //  padding-right: 5px;

  }
  #screen_symbol {
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    display: inline-block
  }
  #screen_price {
    font-size: 4vw;
    font-weight: bold;
    display: inline-block
  }
  #screen_net_pct {
    font-size: 3vw;
    font-weight: bold;
    display: inline-block
  }
  #screen_expiry.header,
  #screen_type.header,
  #screen_dist.header,
  #screen_short_leg.header,
  #screen_long_leg.header {
    font-size: 2.5vw;
    display: inline-block
  }
  #screen_change.header,
  #screen_delta.header,
  #screen_short_leg_vol.header,
  #screen_long_leg_vol.header,
  #screen_net.header {
    font-size: 1.75vw;
    display: inline-block
  }
  #screen_expiry,
  #screen_type,
  #screen_dist,
  #screen_short_leg,
  #screen_long_leg {
    font-size: 3vw;
    display: inline-block
  }
  #screen_change,
  #screen_delta,
  #screen_short_leg_vol,
  #screen_long_leg_vol,
  #screen_net {
    font-size: 2vw;
    display: inline-block
  }
}
#screen_change.up {
  background: green;
  color: white;
}
#screen_change.down {
  background: red;
  color: white;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
tr[data-bau="Bull Put"] {
  background: #99ff99;
}
tr[data-bau="Bear Call"] {
  background: #ff9999;
}
tr:hover[data-bau="Bull Put"] {
  background-color: #00b300;
  cursor: pointer;
}
tr:hover[data-bau="Bear Call"] {
  background-color: #ff0000;
  cursor: pointer;
}

<div id="prescreen">
  <table id="formatscreen">
    <tr>
      <th>
        Symbol</th>
      <th>Price Action</th>
      <th>Expiry Date
        <br>Type</th>
      <th class="right">
        <div id="screen_dist" class="header">Distance</div>
        <div id="screen_delta" class="header">Delta</div>
      </th>
      <th class="right">
        <div id="screen_short_leg" class="header">Short Leg</div>

        <div id="screen_short_leg_vol" class="header">Volume</div>
      </th>
      <th class="right">
        <div id="screen_long_leg" class="header">Long Leg</div>
        <div id="screen_long_leg_vol" class="header">Volume</div>
      </th>
      <th>Return</th>
    </tr>
    <tr data-bau="Bull Put">
      <td>
        <div id="screen_symbol">IBB</div>
      </td>
      <td class="center">
        <div id="screen_price">$1260.39</div>
        <div id="screen_change" class="down">-$12.36 (0.91%)</div>
      </td>
      <td class="center">
        <div id="screen_expiry">20160819</div>
        <div id="screen_type">Bull Put</div>
      </td>
      <td class="right">
        <div id="screen_dist">15.5%</div>
        <div id="screen_delta">0.077</div>
      </td>
      <td class="right">
        <div id="screen_short_leg">$1220.00</div>
        <div id="screen_short_leg_vol">1420</div>
      </td>
      <td class="right">
        <div id="screen_long_leg">$1915.00</div>
        <div id="screen_short_leg_vol">20</div>
      </td>
      <td class="right">
        <div id="screen_net_pct">3.00%</div>
        <div id="screen_net">$0.25</div>
      </td>
    </tr>
    <tr data-bau="Bear Call">
      <td>
        <div id="screen_symbol">NFLX</div>
      </td>
      <td class="center">
        <div id="screen_price">$1260.39</div>
        <div id="screen_change" class="up">+$12.36 (0.91%)</div>
      </td>
      <td class="center">
        <div id="screen_expiry">20160819</div>
        <div id="screen_type">Bull Put</div>
      </td>
      <td class="right">
        <div id="screen_dist">15.5%</div>
        <div id="screen_delta">0.077</div>
      </td>
      <td class="right">
        <div id="screen_short_leg">$1220.00</div>
        <div id="screen_short_leg_vol">20</div>
      </td>
      <td class="right">
        <div id="screen_long_leg">$1915.00</div>
        <div id="screen_short_leg_vol">20</div>
      </td>
      <td class="right">
        <div id="screen_net_pct">3.00%</div>
        <div id="screen_net">$0.25</div>
      </td>
    </tr>
  </table>
  words words
</div>

Answer 1

您正在使用 vw 作为字体大小。 vw 的大小根据设备宽度而变化。

检查这个:https://jsfiddle.net/LtLmr5s5/1/