javascript - 响应式 A4 CSS 代码

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