Question

我有一个带有三个水平列的flexbox布局，我想填充窗口的完整大小，没有滚动条。

在中间栏中有一个显示A4页面的div。尺寸需要始终成比例，如果浏览器调整大小，则div需要在运行时相应地调整大小。

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

我尝试过的第一次尝试;

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

但是当然这个剂量按比例调整大小并且缩小DIV只调整高度和宽度以适应包含空间。

我编写了一个简单的样本来说明问题。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

更新：我无法找到纯CSS解决方案，因此我最终使用了＆＃39; Fit.js＆＃39;

包含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/

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

调整传感器大小 - CSS

1 个答案: