响应式A4 CSS代码 [英] Responsive A4 css code

问题描述

从这个问题中，我得到了一个非常漂亮的代码，可将A4表格渲染到我的网络应用程序.我对其进行了调整以满足我的需求.这是代码片段:

From this question I got a very nice code to render an A4 sheet onto my web app. I adapted it to fill up my needs. Here is the code snippet :

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

这段代码很好地呈现了我想在计算机屏幕上执行的操作.但是，当您在小尺寸的屏幕(例如平板电脑)上使用它时，这不是很方便.

This code is very nicely rendering what I want to do on a computer screen. But when you use it on a small-sized screen, for example a tablet, this isn't very convenient.

如何使此代码响应以适合其显示的屏幕?

How can I make this code responsive to suits the screen where it would be displayed ?

基本上，如果工作表的大小调整为完全显示在屏幕上，或者至少从左到右显示，并且用户可以向下滚动以从上到下显示内容，那将是很好的选择.

Basically, it would be nice if the sheet resizing to be entirely displayed on the screen, or at least from the left to the right side and users could scrolldown to display the content from the top to the bottom.

推荐答案

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

Use vw units instead of cm to get desired effect. 1vw is 1% of screen width.

我将值乘以100 / 23来使页面宽度(21cm)和margin s(每个1cm)占据整个屏幕宽度.

I've multiplied values by 100 / 23 to make page width (21cm) and margins (1cm each) taking whole screen width.

.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单位用于所有内容或其他方式)，因为这样一来您将无法进行内容缩放.

But probably you'll have to change how content is scaled (like use vw units for everything or some other ways) because this way you won't get content scaling.

另一个选择是使用JavaScript获取屏幕宽度，并使用transform: scale根据需要调整屏幕宽度.演示:

Another option is to use JavaScript to get screen width and adjust it your need using transform: scale. Demo:

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>

这篇关于响应式A4 CSS代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！