打印html页面

pt、mm和px的区别

px是像素，pt是磅（1/72英寸），mm是毫米（1英寸=25.4mm）

pt和mm是物理长度单位，这个物理长度指的是印刷长度（打印在纸上的长度），不是屏幕上的物理长度

px和pt、mm之间的换算要借助dpi（Dots Per Inch，每英寸像素数），因此，pt = (px/dpi)*72

demo

根据上述说明，如果你想把html页面打印为pdf，而且是正正好好打印到1张A4纸上，那请注意以下几点

大的布局一定要使用相对距离，确保你的布局是响应式的，因为打印成pdf的时候页面很有可能会缩放。
要使用物理长度（例如字号要用pt，纸张大小要用mm），否则字号很容易不合适，打印时页面很可能会发生缩放，然后文字会挤做一团。
既要在css正文里把body定义成和A4纸一样大，又要在@media print规则里把html定义成和A4纸一样大。（我也不知道为什么，不信的话可以用border-style:solid;验证一下不这么写能不能正常打印到一张A4纸上）
@media print规则里的元素一定得是css正文规则里的元素的父元素，比如你是在body的子元素里指定的大小，那么@media print规则里的元素可以是body。（我也不知道为什么，但是这么着就是能行）

/* 定义全部变量 */
:root{
    --TextSize:10.5pt;  /*5号字*/
    --TitleSize:1.5rem;
    --SubTitleSize:1.2rem;
    --PageWidth:210mm;  /*A4纸的宽度*/
    --AspectRatio:1.414;/*A4纸的高宽比*/
}

/*指定打印时A4纸的宽高*/
@media print{
    html {
        width: 210mm;
        height: 297mm;
    }
}

html{
    /*将root字号调小，字体太大会导致打印时文字挤成一团*/
    font-size: var(--TextSize); 
    display: flex;
    justify-content: center;
}
body{
    width: calc(var(--PageWidth));
    height:calc(var(--PageWidth)*var(--AspectRatio));
    /* border-style: solid; */
}