chrome打印效果差是因未关闭默认样式：需勾选background graphics，用@media print隐藏无关元素、设字号12pt，禁用fixed定位，用hex色值和svg图标，加break-inside: avoid防分页截断，并调@page边距。
直接打印效果差，不是模板问题，而是浏览器默认打印样式没关——先在 Chrome 打开开发者工具 → Ctrl+P → 勾选 Background graphics，否则 CSS 背景色、渐变、阴影全丢。
用 @media print 清掉干扰元素
简历里导航栏、按钮、二维码、页脚链接这些在纸上毫无意义，不手动隐藏，Chrome 会照打不误：
@media print {
nav, .print-hide, button, .contact-qr, footer a {
display: none !important;
}
body {
font-size: 12pt; /* 打印时字号太小看不清，统一设为 12pt */
line-height: 1.5;
}
}
-
!important必须加，否则页面 CSS 优先级可能压过 print 规则 - 别依赖
visibility: hidden，它仍占位，影响分页；display: none才真正移除流式布局 - 避免用
position: fixed放联系方式——打印时它会重复出现在每页左上角
字体和颜色必须适配黑白打印机
深灰（#333）比纯黑（#000）更耐印，浅灰（#666）比 #999 更易辨识；所有彩色强调色得有灰度 fallback：
.section-title {
color: #2c3e50; /* 深蓝，打印后≈#444 */
border-bottom: 2px solid #3498db; /* 打印时这条线会变淡，改用 */
}
.section-title::after {
content: '';
display: block;
height: 2px;
background: #444; /* 明确指定灰度色，不依赖原色转换 */
}
- CSS 中的
hsl()或rgba()在部分打印机驱动下会意外转成全黑，优先用hex - 不要用背景图做分隔线——哪怕设了
background-repeat: no-repeat，某些驱动仍会平铺或裁切错位 - 图标字体（如 Font Awesome）在离线打印时大概率失效，改用 SVG 内联或 Unicode 符号（✓、•、▸）
控制分页：避免技能列表被截断在两页中间
浏览器默认按内容流自动分页，但「技能」或「项目经历」这类块级区域被硬生生劈开，阅读体验极差：
.skill-group, .project-item {
break-inside: avoid;
page-break-inside: avoid; /* 兼容老版 Safari/IE */
}
-
break-inside: avoid是现代标准，但 Safari 15.4 之前需加page-break-inside: avoid - 别对
<section></section>整体设avoid——如果内容超一页，反而导致空白页；只作用于内部最小语义单元（如每个.project-item） - 若某项目描述过长，可在关键句后插入
<div style="break-after: avoid"></div>强制留在同页
最常被忽略的是纸边距：A4 纸实际可打印区域约 210mm × 270mm，但浏览器默认留白太大。用 @page { margin: 0.5in; } 微调，再配合 max-width: 760px 控制内容宽度——宽了换行混乱，窄了浪费纸面。打印前务必用 Ctrl+P → More settings → Paper size: A4 手动确认，别信“自动检测”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
