保持表格的宽高比

Question

我有一张表示坐标的表格.

我怎样才能动态改变大小,所以它总是适合父div(宽度:100%),就像图像一样？

现在我使用硬编码的@media查询.但必须有更好的方法.

.hitbox {
  width: 25%; /* of page */
}

@media (min-width: 702px) and (max-width: 800px) {
  .hitbox .tablewrapper {
    font-size: 9px;
  }
}
@media (min-width: 800px) and (max-width: 840px) {
  .hitbox .tablewrapper {
    font-size: 10px;
  }
}
@media (min-width: 840px) and (max-width: 915px) {
  .hitbox .tablewrapper {
    font-size: 11px;
  }
}

编辑:

如果表需要变得更小,则包含的文本是固定文本大小的问题.

JSFiddle
这很好用.
但小一点,它不起作用.
它应该使字体更小,或至少切割单元格.

编辑2: 整个表格应始终可见,阅读文本并不重要,但要查看它创建的图案(颜色为灰色或红色).

Answer 1

使用相对于视口的单位作为字体大小。

1 vw单位等于1%初始包含块的宽度。

将其与父级的适当宽度div（直到正文和 html）相结合，它应该会给您带来所需的结果。然后，字体大小将根据屏幕（视口）大小动态缩放。如果减小视口大小，字体大小也会减小，反之亦然。

例如：

td {
    width: calc(100% / 12); padding: 2px;
    overflow: hidden; background: #bababa;
    font-size: 1.5vw; /* <---- the viewport relative font-size */
}

演示小提琴 1：https ://jsfiddle.net/abhitalks/ucoLcm50/9/

演示片段1（点击全屏查看效果）：

td {
    width: calc(100% / 12); padding: 2px;
    overflow: hidden; background: #bababa;
    font-size: 1.5vw; /* <---- the viewport relative font-size */
}

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; }
div { background-color: red; width: 50%; min-width: 160px; }
table { width: 100%; font-family: monospace; }
td {
    width: calc(100% / 12); padding: 2px;
    overflow: hidden; background: #bababa;
    font-size: 1.5vw; /* <---- the viewport relative font-size */
}

另一种（也是更好的）解决方案是保持字体大小固定，但div基于min-width. 这将保持表数据可读，并且在空间有限时还允许滚动表。

例如：

div { 
    width: 50%; min-width: 180px; 
    overflow-y: hidden; overflow-x: auto;
}

演示小提琴 2：https://jsfiddle.net/abhitalks/pu2yh0fc/1/

演示片段 2：

<div>
    <table>
        <tr>
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
            <td>A5</td><td>A6</td><td>A7</td><td>A8</td>
            <td>A9</td><td>A10</td><td>A11</td><td>A12</td>
        </tr>
        <tr>
            <td>B1</td><td>B2</td><td>B3</td><td>B4</td>
            <td>B5</td><td>B6</td><td>B7</td><td>B8</td>
            <td>B9</td><td>B10</td><td>B11</td><td>B12</td>
        </tr>    
    </table>
</div>

div { 
    width: 50%; min-width: 180px; 
    overflow-y: hidden; overflow-x: auto;
}