Question

从this question我得到了一个非常好的代码来将A4表格渲染到我的网络应用程序上。我改编它以满足我的需求。以下是代码段：

.book {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  display: block;
  width: 21cm;
  height: 29.7cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  margin: 1cm;
  width: 19cm;
  height: 27.7cm;
  outline: 0cm #FAFAFA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="container-fluid">
  <div class="book">
    <div class="page">
      HEADER
      <div class="subpage" id='editor-container'>CONTENT</div>
    </div>
  </div>
</div>

此代码非常好地在计算机屏幕上呈现我想要做的事情。但是当你在小尺寸屏幕上使用它时，例如平板电脑，这不是很方便。

如何使此代码响应以适合将要显示的屏幕？

基本上，如果页面调整大小完全显示在屏幕上，或者至少从左侧到右侧，并且用户可以向下滚动以显示从顶部到底部的内容，那将是很好的。

Answer 1

使用vw单位而不是cm来获得所需的效果。 1vw占屏幕宽度的1％。

我将值乘以100 / 23，以使整个屏幕宽度的页面宽度（21cm）和margin s（每个1cm）。

.book {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  display: block;
  width: calc(100 / 23 * 21vw);
  height: calc(100 / 23 * 29.7vw);
  margin: calc(100 / 23 * 1vw) auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  margin: calc(100 / 23 * 1vw);
  width: calc(100 / 23 * 19vw);
  height: calc(100 / 23 * 27.7vw);
  outline: 0cm #FAFAFA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="container-fluid">
  <div class="book">
    <div class="page">
      HEADER
      <div class="subpage" id='editor-container'>CONTENT</div>
    </div>
  </div>
</div>

但是，您可能必须更改内容的缩放方式（例如，使用vw单位来处理所有内容或其他方式），因为这样您就无法获得内容缩放。

另一个选择是使用JavaScript获取屏幕宽度，并使用transform: scale调整您的需求。演示：

function adjustZoomLevel() {
  var documentWidth = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
  // 1 cm = 37.795276px;
  var zoomLevel = documentWidth / (23 * 37.795276);
  
  // stop zooming when book fits page
  if (zoomLevel >= 1) return;
  
  document.querySelector(".book").style.transform = "scale(" + zoomLevel + ")";
}

adjustZoomLevel();

window.addEventListener("resize", adjustZoomLevel);

.book {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
  transform-origin: 0 0;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  display: block;
  width: 21cm;
  height: 29.7cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  margin: 1cm;
  width: 19cm;
  height: 27.7cm;
  outline: 0cm #FAFAFA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="container-fluid">
  <div class="book">
    <div class="page">
      HEADER
      <div class="subpage" id='editor-container'>CONTENT</div>
    </div>
  </div>
</div>

Answer 2

如果你不需要这个非常精确，那么Vadim的方法就可以了，并且比我建议的要少得多。但是，对于我的用例，子像素缩放将导致事物不能始终100％正确定位，具体取决于页面的复杂程度。如果您需要像PDF一样完美地缩小/缩小所有内容，那么您可以使用CSS的transform：scale（）属性和媒体查询来实现此目的。

e.g。

.page {
    width: 29.7cm;
}

@media screen and (max-width: 800px) {
    .page {
          transform: scale(0.8);
    }
}

@media screen and (max-width: 600px) {
    .page {
          transform: scale(0.6);
    }
}
/* etc */

这主要是一个繁琐的过程，并且需要四处寻找才能获得适当的缩放比例，但对于我来说，这是唯一能够以最少的布局怪癖为我工作的东西。

您将偶然发现的一件事是transform: scale使页面变小，实际上并没有在文档中“移动”页面。它们会明显缩小，但仍占用相同的空间，因此当您缩小页面时，页面之间的页边距会增加。这可以通过向页面添加负边距来减轻。假设它们被堆叠并垂直滚动：

.page {
    width: 29.7cm;
}

@media screen and (max-width: 800px) {
    .page {
          transform: scale(0.8);
          margin-bottom: -5cm;
    }
}

@media screen and (max-width: 600px) {
    .page {
          transform: scale(0.6);
          margin-bottom: -10cm;
    }
}

当然，那些变换值不是按比例缩放的（ba-dum-tish），所以如果沿着这条路走下去，你将不得不四处寻找并找到适合你的正确值。

响应A4 css代码

2 个答案: