Question

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

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

＆＃13;

 #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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这里只需要一个简单的CSS属性：max-width

#formatscreen {
  max-width: 800px;
  width: 100%;
  /* ... */
}

Answer 2

您使用vw表示字体大小。 vw的大小根据设备宽度而变化。

请检查：https://jsfiddle.net/LtLmr5s5/1/

Answer 3

如果您删除CSS中不允许//条评论

，则您的代码可以正常运行

//@ width:800px
//2.5vw = 20px
//1.75vw = 14px
//1vw = 8px

它们只能在SCSS中使用。

所以这就足够了：

#formatscreen {
  font-family: Arial;
  width: 800px;
  border-collapse: collapse;
}

/* ... */

@media only screen and (max-device-width: 480px),
(max-width:810px) {
  #formatscreen {
    width: 100%;
  }
  /* ... */
}
/* ... */

此外，您无需为此设置媒体查询，因为您可以在TheThirdMans answer中看到。

当窗口放大时，制作动态尺寸表会锁定它的尺寸

3 个答案: