57、高级 CSS 助力网站打印与移动适配优化

高级 CSS 助力网站打印与移动适配优化

1. 打印样式基础

在进行网页打印时，CSS 通过扩展盒模型来定义打印页面，将整个页面包含在一个页面框（page box）中。页面框由两部分组成：页面区域（page area），包含文档内容；边距区域（margin area），包含打印内容与页面边缘之间的空间。

可以使用 @page 规则来设置页面框的样式，示例代码如下：

@page { 
    margin: 0.5in; 
}

上述代码将打印输出的页面边距设置为 0.5 英寸。需要注意的是，页面框并不支持所有的测量单位，如 em 或 ex 单位。一般建议使用适合页面尺寸的绝对单位，如英寸或厘米。

2. 页面伪类与命名

如果网页需要打印多页，可以使用伪类为不同页面定义不同的样式。常见的页面伪类有：
- first ：用于打印输出的第一页。
- left ：用于双面打印中左侧的页面。
- right ：用于双面打印中右侧的页面。

示例代码如下：

@page:left {margin: 3cm 5cm 3cm 2cm;} 
@page:right {margin: 3cm 2cm 3cm 5cm;}

上述代码为双面