javascript - 缩放内容以始终适合窗口

标签 javascript jquery html css

我遇到 y 轴溢出问题。我正在寻找一种解决方案来缩放所有内容，使其始终适合 100% 宽度和 100% 高度。由于我永远不知道将放入多少内容，因此它必须缩放以适合事件窗口。由于需要显示所有数据，因此无法 overflow hidden 。

我尝试过使用视口(viewport)设置，我为此搜索了 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% 宽度，总是缩放所有内容以适合窗口，无论数据有多少，文本大小可以超小，这很好，但总是从大窗口缩放到最少的。

最佳答案

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>

关于javascript - 缩放内容以始终适合窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43938131/

上一篇：javascript - 正则表达式 jquery 验证器中字符类的范围乱序

下一篇：javascript - Chart JS 图例样式

相关文章：

html - 奇怪的空白问题。 HTML、CSS、 Angular

javascript - 为什么我的 Angular Directive(指令)没有在隔离范围内获取父 Controller 范围？

javascript - 订阅不工作 angular2

javascript - window.history.replaceState 中的 'data' 是什么

javascript - Select2 - 使用 JSON 作为本地数据

javascript - javascript 中的事件顺序无法正常运行

javascript - 当从 Node js 应用程序发生插入时，插入触发器不起作用

javascript - 我想在 jquery 中加载页面时隐藏所有字段

javascript - 如何使用字符串值正确查找(并最终更改)img src 属性？

javascript - 拖动时拖放更改图像

©2024 IT工具网  联系我们