如何根据打印预览选择的A4/A6纸张尺寸用CSS调整HTML样式？

核心思路：用CSS打印媒体查询匹配纸张尺寸 #

完全可以实现类似屏幕尺寸适配的效果，无需额外JS获取选中的纸张尺寸，浏览器会自动根据打印预览中选择的纸张，匹配对应的CSS规则。

1. 针对A4纸张的样式规则 #

A4标准尺寸为210mm×297mm，直接通过打印媒体查询指定尺寸条件：

@media print and (width: 210mm) and (height: 297mm) {
  /* A4账单专属样式：调整字体、布局等 */
  .bill-container {
    font-size: 14px;
    padding: 20mm;
    line-height: 1.5;
  }
  .receipt-container {
    display: none; /* A4打印时隐藏收据内容 */
  }
}

2. 针对A6纸张的样式规则 #

A6标准尺寸为105mm×148mm，同理设置对应规则：

@media print and (width: 105mm) and (height: 148mm) {
  /* A6收据专属样式：缩小字体、紧凑布局 */
  .receipt-container {
    font-size: 12px;
    padding: 5mm;
    line-height: 1.2;
  }
  .bill-container {
    display: none; /* A6打印时隐藏账单内容 */
  }
}

3. 兼容性优化 #

• 部分浏览器对size属性支持更友好，可补充写法：

@media print and (size: A4) {
  /* A4样式 */
}
@media print and (size: A6) {
  /* A6样式 */
}

建议同时保留尺寸数值和size两种写法，覆盖更多浏览器场景。

• 避免给页面设置固定宽高，让内容能随纸张尺寸自适应。

进阶方案：JS动态监听纸张切换 #

如果需要更复杂的逻辑，可通过window.matchMedia()API监听匹配状态：

// 监听A4纸张匹配
const a4Matcher = window.matchMedia('print and (width: 210mm) and (height: 297mm)');
a4Matcher.addEventListener('change', (e) => {
  if (e.matches) {
    document.body.classList.add('print-a4');
    document.body.classList.remove('print-a6');
  }
});

// 监听A6纸张匹配
const a6Matcher = window.matchMedia('print and (width: 105mm) and (height: 148mm)');
a6Matcher.addEventListener('change', (e) => {
  if (e.matches) {
    document.body.classList.add('print-a6');
    document.body.classList.remove('print-a4');
  }
});

再通过类名绑定样式：

.print-a4 .bill-container { /* A4样式 */ }
.print-a6 .receipt-container { /* A6样式 */ }

内容的提问来源于stack exchange，提问作者Hansjörg Hofer