当打开游览器 ctrl + P 和用 puppeteer generate PDF 时，需要知道有个固定的 HTML 结构
- HeaderTemplate
- BodyTemplate
- FooterTemplate
当使用 1rem 时，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%，
（第1个坑）为什么 width 一定要给 8.26inch, 而不是给 100%，为什么不能？可能是渲染循序吧，这里我不了解~
HeaderTemplate & FooterTemplate 有默认 style
body {
display: flex;
flex-direction: column;
margin: 0;
}
#header,
#footer {
display: flex;
flex: none;
}
看起来一切正常，可是如果用 display: flex ，会发现没有自动放大, 这里有鬼
（第2个坑）把 flex 换成 block 后，一切正常了
参考链接