缩放内容以始终适合窗口答案

【问题标题】：Scale content to always fit window缩放内容以始终适合窗口
【发布时间】：2017-10-11 19:07:56
【问题描述】：

我遇到了 y 轴溢出的问题。我正在寻找一种解决方案来缩放所有内容，使其始终适合 100% 的宽度和 100% 的高度。因为我永远不知道会放入多少内容，所以它必须缩放以适应活动窗口。隐藏溢出不是选项，因为所有数据都需要显示。

我尝试过使用视口设置，为此我搜索了 vanilla js 和 jquery 解决方案，但没有找到解决此问题的解决方案，我确定有一个？

这是我当前的 html - JSFiddle

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 1em;
}

* {
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}

.process {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.process div {
  display: table-cell;
  position: relative;
}

.process div:nth-child(even) {
  background-color: #edf0f6;
}

.process div:nth-child(odd) {
  background-color: #fafcff;
}

<body>

  <div id="wrapper">
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Curing</header>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Finishing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        aasd
      </div>
    </div>
  </div>

</body>

</html>

如您所见，其中有一些文本，并且可能会更多，并且它必须适合您当前的窗口，不允许滚动。

所以我正在寻找的是 100% 的高度和 100% 的宽度，总是缩放所有内容以适应窗口，无论有多少数据，文本大小都可以超小，这很好，但总是从大窗口缩放到最小的。

【问题讨论】：

看看这里：stackoverflow.com/questions/24376897/…

标签： javascript jquery html css

【解决方案1】：

我认为使用Viewport-percentage lengths 是最好的解决方案。

vw [unit] 等于初始包含块宽度的 1%。
vh [unit] 等于初始包含块高度的 1%。
vi [unit] 等于根元素内联轴方向上初始包含块大小的 1%。
vb [unit] 等于根元素块轴方向上初始包含块大小的 1%。
vmin [unit] 等于vw 或vh 中的较小者。
vmax [unit] 等于vw 或vh. 中的较大者

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

p {
  font-size: 2vw; /* here */
}

* {
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}

.process {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.process div {
  display: table-cell;
  position: relative;
}

.process div:nth-child(even) {
  background-color: #edf0f6;
}

.process div:nth-child(odd) {
  background-color: #fafcff;
}

<div id="wrapper">
  <div class="process">
    <div>
      <header>Idle</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Weighing</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Mixing</header>
    </div>
    <div>
      <header>Pressing</header>
    </div>
    <div>
      <header>Done</header>
    </div>
  </div>
  <div class="process">
    <div>
      <header>Idle</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Weighing</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Curing</header>
    </div>
    <div>
      <header>Mixing</header>
    </div>
    <div>
      <header>Pressing</header>
    </div>
    <div>
      <header>Finishing</header>
    </div>
    <div>
      <header>Done</header>
    </div>
  </div>
  <div class="process">
    <div>
      aasd
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

Flexbox 并更新为使用字体缩放器，在构建后已粘贴到 css 中，但这个 mixin 是它的生成方式：-

@mixin font-scaler($min_width:400, $max_width: 800, $min_font:12, $max_font:24) {

        //Usage:-
        // @include font-scaler(768, 1200, 12, 24);

        @media (min-width: #{$min_width}px) and (max-width: #{$max_width}px) {
            font-size: calc(#{$min_font}px + (#{$max_font} - #{$min_font}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));

        }
    }

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 1em;
}

* {
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (min-width: 320px) and (max-width: 1920px) {
    #wrapper {
      font-size: calc(9px + (20 - 9) * ((100vw - 320px) / (1920 - 320))); } }

.process {
  display: flex;
  width: 100%;
  height: 100%;
}

.process div {
  flex: 1 1 auto;
}

.process div:nth-child(even) {
  background-color: #edf0f6;
}

.process div:nth-child(odd) {
  background-color: #fafcff;
}

<body>

  <div id="wrapper">
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Curing</header>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Finishing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        aasd
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

这是一个 sass 解决方案还是如何实现的？
不，如果您愿意，可以直接使用 font-size: calc(9px + (20 - 9) * ((100vw - 320px) / (1920 - 320)));，但使用 sass 更容易。 vars 看起来像这样 font-size: calc([min-font-size] + ([max-font-size] - [min-font-size]) * ((100vw - [min-browser-width]) / ([max-browser-width] - [min-browser-width]))); - 也不要忘记媒体查询
这个解决方案的一个问题是它移除了 100% 的高度和 100% 的宽度，总是覆盖整个窗口。还是我错过了什么？
哈哈我会继续努力的，我去看看砌体，谢谢你的帮助！
那些计算太疯狂了，我会接管他们的独角兽+1 ;)