当打开游览器 ctrl + P 和用 puppeteer generate PDF 时，需要知道有个固定的 HTML 结构
当使用 1rem 时，会依赖 html 的 font-size, 可是 HeaderTemplate and FooterTemplate 没有 html， header，body tag……
（第一个坑）没办法给 html tag, 而是要用 style home font-size
html {
font-size: 14px;
}
HeaderTemplate & FooterTemplate 都依赖同一个 style html font-size, 那么只需要写在 HeaderTemplate 就好。
A4 width 有人说 8.3inch, 也有人说 8.26inch
而我测量后，发现 A4 width = 8.26 inch, 1 inch = 96px
我们都知道 HeaderTemplate and FooterTemplate 会放大，而具体是多少，每个人说的都不一样
而我测量后，最终是放大了 4/3 = 1.3333 倍
既然会放大，那么直接给 HeaderTemplate & FooterTemplate 一个固定的宽 和 scale 75%，
（第二个坑）为什么 width 一定要给 8.26inch, 而不是给 width: 100%，为什么不能？可能是渲染循序吧，这里我不了解~
HeaderTemplate & FooterTemplate 有默认 style
body {
display: flex;
flex-direction: column;
margin: 0;
}
#header,
#footer {
display: flex;
flex: none;
}
看起来一切正常，可是如果用 display: flex ，会发现没有自动放大, 这里有鬼
（第三个坑）把 flex 换成 block 后，一切正常了
参考链接
原文：https://www.cnblogs.com/stooges/p/15001697.html