Javascript 响应A4 css代码

从那时起，我得到了一个非常好的代码，可以在我的web应用程序上渲染A4纸。我用它来满足我的需要。以下是代码片段：

.book{
保证金：0；
填充：0；
背景色：#FAFAFA；
字体：12pt“塔荷马”；
}
* {
框大小：边框框；
-moz框大小：边框框；
}
.第页{
显示：块；
宽度：21cm；
身高：29.7厘米；
保证金：1厘米自动；
边框：1px#d3实心；
边界半径：5px；
背景：白色；
长方体阴影：0.5pxRGBA（0,0,0,0.1）；
}
.子页{
边缘：1cm；
宽度：19厘米；
身高：27.7厘米；
轮廓：0cm#fafa实心；
}
@页面{
尺寸：A4；
保证金：0；
}
@媒体印刷品{
.第页{
保证金：0；
边界：首字母；
边界半径：初始；
宽度：首字母；
最小高度：初始高度；
盒影：首字母；
背景：初始；
分页符后：始终；
}
}

标题
内容

使用

vw

单位而不是

cm

来获得所需效果

1vw

是屏幕宽度的1%

我将值乘以

100/23

，使页面宽度（

21cm

）和

margin

s（

1cm

）占据整个屏幕宽度

.book{
保证金：0；
填充：0；
背景色：#FAFAFA；
字体：12pt“塔荷马”；
}
* {
框大小：边框框；
-moz框大小：边框框；
}
.第页{
显示：块；
宽度：计算（100/23*21vw）；
高度：计算（100/23*29.7vw）；
保证金：calc（100/23*1vw）汽车；
边框：1px#d3实心；
边界半径：5px；
背景：白色；
长方体阴影：0.5pxRGBA（0,0,0,0.1）；
}
.子页{
保证金：计算（100/23*1vw）；
宽度：计算（100/23*19vw）；
高度：计算（100/23*27.7vw）；
轮廓：0cm#fafa实心；
}
@页面{
尺寸：A4；
保证金：0；
}
@媒体印刷品{
.第页{
保证金：0；
边界：首字母；
边界半径：初始；
宽度：首字母；
最小高度：初始高度；
盒影：首字母；
背景：初始；
分页符后：始终；
}
}

标题
内容

如果你不需要超精确的方法，瓦迪姆的方法可以很好地工作，并且比我要建议的要简单得多。然而，在我的用例中，亚像素缩放将导致东西并非总是100%正确定位，这取决于页面的复杂性。如果您需要像PDF一样完美地缩小/放大所有内容，那么唯一可以做到这一点的方法就是使用CSS的transform:scale（）属性和媒体查询

e、 g

这基本上是一个复杂的过程，需要反复尝试才能获得适当的缩放量，但这是唯一一件始终对我有效的事情，布局上的怪癖最少

有一件事你会偶然发现，

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），因此，如果你沿着这条路走下去，你必须四处玩，找到适合你的正确值。

我已经开发了几个应用程序，它们使用固定大小页面的概念，是的，它们很难做出响应。在任何给定的时间屏幕上是否会有多个页面？是的，可以添加页面，因此我认为最好只从左向右显示，让用户向下滚动。类似于使宽度（21cm）可调整大小并完全显示，然后调整高度以获得真实比例的东西？@MaximeOzenne我的解决方案是否有帮助？看起来这正是我需要的，我将在半小时内尝试。谢谢@MaximeOzenne，但您可能必须更改内容的缩放方式（如使用

vw

单位进行任何操作或其他方式），因为这样您就无法进行内容缩放。谢谢您的回答！这似乎需要大量的工作才能得到真正准确的答案，所以我会尝试使用Vadim的答案，如果它不符合我的需要，我会返回到您的代码。这是非常好的工作！现在，我必须找到一种方法来缩放文档的字体大小，所有这些都将完成。谢谢你@MaximeOzenne很高兴它帮助了您。@MaximeOzenne添加了另一个带有少量JavaScript的选项，但它将消除重写CSS的需要。我使用了我的CSS来尝试您的脚本。它似乎适合字体大小，但页面div的大小调整不好。事实上，我有一个页面是从screen@MaximeOzenne刚刚删除了放大（

if（zoomLevel>=1）返回；

）。这看起来够好吗？

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