当它100％缩放时看起来很好但是当我缩小时一切都不合适

Question

Here是缩放图像：

我不知道问题是什么。

我的 HTML 代码基本上是这样的：

<div class="wrapper">
  <div class="trimester">
    <table>
    </table>
  </div>
  <div class="trimester">
    <table>
    </table>
  </div>
  <div class="trimester">
    <table>
    </table>
  </div>
</div>

然后我的 CSS 代码：

.wrapper {
  overflow: auto;
}
.trimester {
  width: 33%;
  display: inline-block;
  vertical-align: top;
}
.trimester table {
  font: 12px Open Sans, sans-serif;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
.trimester td {
  padding: 2px;
  overflow: hidden;
}    

Answer 1

您可以使用display:table/[-cell]来解决此问题

＆＃13;

＆＃13;

*, *:before, *:after {
  box-sizing: border-box;
}
.wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.trimester {
  width: 33%;
  display: table-cell;
  vertical-align: top;
}
.trimester table {
  font: 12px Open Sans, sans-serif;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  /*demo styles*/
  height:500px
}
.trimester td {
  padding: 2px;
}
/*demo styles*/
.trimester:nth-child(odd) {
  background: red
}
.trimester:nth-child(even) {
  background: green
}

＆＃13;

<div class="wrapper">
  <div class="trimester">
    <table>
      <tr>
        <td>1st table</td>
      </tr>
    </table>
  </div>
  <div class="trimester">
    <table>
      <tr>
        <td>2nd table</td>
      </tr>
    </table>
  </div>
  <div class="trimester">
    <table>
      <tr>
        <td>3rd table</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在查看Stack Overflow上的其他帖子时，一般的共识是使用浮点数和百分比宽度来构建布局，以缓解浏览器缩放问题（See this post）。

考虑一下你的用例。放大更有可能，因为如果您有视力障碍，它有助于阅读文本。 （UX discussion）。因此，除非您的用例明确要求支持缩小，否则可能不值得调试。