Responsive A4 css code

Question

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.

Answer 1

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

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>

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.

---

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>

Answer 2

If you don't need this to be super-precise, Vadim's approach works just fine, and is a lot less hacky than what I'm about to suggest. However, for my use-cases, subpixel scaling will result in things not always being 100% correctly positioned, depending on the complexity of your page. If you need everything to be perfectly scaled down/up like a PDF, the only way you can do this is with CSS' transform: scale() property and media queries.

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

This is mostly a fiddly process, and will require playing around to get the right amounts of scaling, but it's been the only thing that consistently worked for me with the fewest layout quirks.

One thing you will stumble across is that transform: scale makes the page smaller, it doesn't actually "move" the page accordingly in the document. They will visibly shrink, but still take up the same amount of space, so you'll get increased margins between the pages when you scale them down. This can be mitigated by adding negative margins to the pages. Assuming they're stacked down and scroll vertically:

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

Of course, those transform values are not to scale (ba-dum-tish), so you'll have to play around and find the correct values that work for you, should you go down this path.