css - 调整大小传感器 - 在 CSS 中按比例调整 div 大小

Question

我有一个包含三个水平列的 flexbox 布局，我想在没有滚动条的情况下填充整个窗口。

在中心列中有一个显示 A4 页面的 div。维度需要始终成比例，如果浏览器调整大小，则 div 需要动态相应地调整大小。

div 的内容也需要缩放。 div 将包含许多元素，包括需要按比例缩小以匹配父页面容器的文本和图像。

我的第一次尝试；

A4-Portrait {width: auto; height: auto;max-width: 595.296px;max-height: 
841.896px;}

但是当然，这个dosent resize proportionaly nor scale under DIV only resize the height and width to accomate the containing space.

我编写了一个简单示例来说明问题。

body 
{
  padding: 0em;
  margin: 0em;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: arial;
  box-sizing: border-box;
}

header, main, footer 
{
  padding: 1em;flex: 1;
}

header, footer
{
  background-color: #999;
}

main 
{
  flex: 2;
  background-color: grey;
}

page 
{
  padding: 1em;
  background: white;
  display: block;
}

.A4-Portrait 
{
  width: 595.296px;
  height: 841.896px;
}

<header>[header]</header>

<main>
  <page id="pageSize" class="A4-Portrait">
      [page]
  </page>
  
</main>

<footer>[footer]</footer>

更新:我找不到纯 CSS 解决方案，所以我最终使用了“Fit.js”

包括JS文件我只需要添加下面的代码就可以实现。以 px 为单位的 A4 页面大小完好无损，JS 计算出父 DIV 返回的最大尺寸。这也观察了用户调整浏览器的大小。

// get element references
var foo = document.querySelector('main');
var bar = document.querySelector('#pageSize');
// fit bar into foo
// the third options argument is optional, see the README for defaults
// https://github.com/soulwire/fit.js
var watching = fit(bar, foo, {

    // Alignment
    hAlign: fit.CENTER, // or fit.LEFT, fit.RIGHT
    vAlign: fit.CENTER, // or fit.TOP, fit.BOTTOM

    // Fit within the area or fill it all (true)
    cover: false,

    // Fit again automatically on window resize
    watch: true,

    // Apply computed transformations (true) or just
    // return the transformation definition (false)
    apply: true
});

Answer 1

如果你用 vw 设置所有东西，它都会随着屏幕的宽度缩放。我想这就是您想要的？

我通过采用 A4 页面比例(1:1.414)来设置页面尺寸。我将宽度设置为我认为好看的值，然后使用 calc 作为高度，取我设置的宽度，然后乘以 1.414。

对于字体大小，这在某种程度上都变成了一种猜测。这可能有助于弄清楚如何设置字体大小:http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/

body 
{
  padding: 0em;
  margin: 0em;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: arial;
  box-sizing: border-box;
}

header, main, footer 
{
  padding: 1em;flex: 1;
}

header, footer
{
  background-color: #999;
}

main 
{
  flex: 2;
  background-color: grey;
}

page 
{
  padding: 1em;
  background: white;
  display: block;
}

.A4-Portrait 
{
  width: 80vw;
  height: calc(1.414 * 80vw);
  margin: 0 auto;
}
 
.page-header {
  font-size: 5vw;
}
   
.page-body {
  font-size: 3vw;
}

<header>[header]</header>

<main>
  <page id="pageSize" class="A4-Portrait">
      <h1 class="page-header">Page header</h1>
      <p class="page-body">Page text page text page text</p>
  </page>
  
</main>

<footer>[footer]</footer>