UD5工具箱
@media print 是CSS中的媒体查询规则，专门用于定义网页在打印时应用的样式。当用户通过浏览器打印网页（Ctrl+P）时，@media print 中的CSS规则会生效，覆盖屏幕显示的默认样式。它可以让开发者隐藏不必要的UI元素（导航栏、侧边栏、广告等）、调整字体大小和颜色以适合纸质阅读、设置页面边距和纸张大小、控制分页位置避免内容在不当位置断开、显示链接的URL地址增加纸质文档的参考价值。本工具的核心功能就是帮助开发者快速生成专业的@media print CSS代码，无需手动编写复杂的打印样式。
大多数网页的屏幕显示样式并不适合打印：深色背景浪费墨水、导航栏在纸面上毫无意义、彩色文字在黑白打印中可能模糊不清。如果不优化打印样式，打印出来的页面往往会包含大量无用的UI元素，正文内容被挤压到很小的区域，整体排版杂乱无章。优化打印样式可以提升用户体验、节省资源（纸张和墨水/碳粉），同时让打印出的文档更加专业整洁。对于博客、文档站、电商产品页等内容型网站，打印优化尤为重要。本工具通过直观的可视化配置，让打印样式优化变得简单高效。
@page 规则用于定义打印页面的尺寸、方向和边距。常用属性包括：size: A4 设置纸张大小（支持A4、Letter、Legal、A3等，或自定义如 210mm 297mm）；size: landscape 设置横向打印；margin: 15mm 设置页面边距；margin-top/right/bottom/left 分别设置各边距；@page :first 为第一页设置特殊样式；@page :left / :right 为左右页分别设置（双面打印）。注意：@page 规则在Chrome中支持较好，但部分浏览器可能对某些属性支持有限。本工具的页面设置模块会自动生成@page规则代码。
在Chrome中有多种方式调试打印样式：打印预览——按 Ctrl+P（Mac: Cmd+P）打开打印对话框，直接预览打印效果；开发者工具——打开DevTools 然后点击右上角菜单 More tools Rendering，勾选 Emulate CSS media type 并选择 print，这样页面会应用@media print样式，可以在开发者工具中实时修改和调试打印CSS；使用本工具——在左侧配置参数，右侧实时预览模拟效果，快速迭代调整，无需反复切换到浏览器打印预览。建议在最终集成前使用浏览器的打印预览功能进行验证。
使用CSS的::after伪元素配合attr()函数可以在打印时自动在链接后显示URL。代码示例：@media print { a[href]:after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } }。这样在打印文档中，每个链接后面都会显示其完整URL，方便纸质读者获取链接信息。本工具提供了一键开启此功能的选项，无需手动编写CSS代码。建议在打印文档类页面时开启此功能，因为纸质文档的读者无法直接点击链接，显示URL能帮助他们手动输入地址访问相关内容。
默认情况下，大多数浏览器在打印时会自动移除背景色和背景图，这是为了节省墨水并提高可读性。如果需要保留背景色（例如彩色图表或重要提示框），可以使用 print-color-adjust: exact 属性。在本工具中，只需勾选「强制保留颜色 (print-color-adjust)」选项，工具会自动生成包含 -webkit-print-color-adjust: exact 和 print-color-adjust: exact 的CSS代码。但请注意，强制保留颜色会显著增加打印耗材消耗，建议仅在确实需要保留关键颜色信息时使用。对于大多数文本内容，移除背景色反而是更好的选择。
使用以下CSS属性可以精细控制分页行为：page-break-before: always 在该元素前强制分页，常用于章节标题前；page-break-after: avoid 避免在该元素后分页；page-break-inside: avoid 避免在元素内部分页，适合表格、图片等内容；orphans: 2 页面底部最少保留2行（孤行控制）；widows: 2 页面顶部最少保留2行（寡行控制）。现代浏览器也支持 break-before、break-after、break-inside 属性，功能类似但语义更清晰。本工具将这些复杂的分页属性封装为直观的开关和数值设置，帮助开发者轻松实现完美的分页效果。
移动端浏览器（iOS Safari、Android Chrome等）也支持打印功能，但需注意：移动端通常使用AirPrint或Google Cloud Print，对@page规则支持有限；建议使用响应式打印样式，考虑较小的纸张尺寸；字体大小不宜过小，移动端打印通常默认缩放较小；测试时使用实际移动设备进行打印预览；避免使用vw/vh单位，改用pt、mm、in等绝对单位。本工具生成的CSS代码使用绝对单位，具有良好的跨平台兼容性，但在移动端打印时仍建议进行实际测试以确认效果。
打印样式推荐使用绝对单位而非屏幕像素单位：pt（磅）是最常用的打印字体单位，1pt = 1/72英寸，12pt约等于16px；mm / cm 适合设置边距和页面尺寸；in（英寸）适合设置较大的尺寸；px 虽然可以使用，但在不同打印机分辨率下表现不一致。本工具生成的代码默认使用pt和mm作为单位，确保打印效果一致。选择正确的单位是打印样式优化的基础，错误的单位可能导致打印出来的文字大小与预期不符。建议在打印样式中始终使用绝对单位，避免使用em、rem、vw等相对单位。
使用本工具可以快速生成适合您网站的打印CSS代码：在左侧配置面板中根据需求调整各项参数；观察右侧预览区的实时效果；复制生成的CSS代码；将代码粘贴到您网站的CSS文件中（或 style 标签内）；使用浏览器的打印预览功能验证效果。建议将打印样式放在现有样式表的最末尾，确保它能覆盖屏幕样式。如果网站使用了CSS框架（如Bootstrap），打印样式同样需要放在框架样式之后。对于使用CSS Modules或CSS-in-JS的项目，可以将打印样式放在全局样式文件中。
本工具生成的CSS代码严格遵循W3C CSS规范，兼容所有主流现代浏览器，包括Chrome、Firefox、Edge、Safari等。代码中使用的@media print、@page、page-break等属性都有广泛的浏览器支持。对于少数实验性属性，工具会自动添加浏览器前缀（如-webkit-print-color-adjust）以确保兼容性。需要注意的是，不同浏览器对打印样式的渲染可能存在微小差异，建议在目标浏览器中进行实际打印测试。工具生成的代码默认使用pt和mm作为绝对单位，确保在不同打印机和纸张尺寸上都能获得一致的效果。
不需要。本工具完全在浏览器本地运行，所有的配置计算、预览渲染和CSS代码生成都在您的浏览器中完成，不会上传任何网页数据或配置信息到服务器。这意味着您可以放心使用本工具处理任何包含敏感信息的网页的打印样式，不必担心数据泄露风险。工具的代码全部在前端执行，不依赖后端服务，即使在网络断开的情况下也能正常使用（首次加载后）。