响应式 A4 CSS 代码

Question

来自this question，我得到了一个非常好的代码，可以在我的网络应用程序上渲染一张 A4 纸。我对其进行了调整以满足我的需求。这是代码 sn-p ：

.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) 和 margins（每个 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() 属性和媒体查询。

例如

.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），所以如果你走这条路，你必须四处寻找适合你的正确值。