使用@media print可针对打印环境应用样式,如设置字体、隐藏非必要元素,并通过媒体特性控制分页与纸张适配,提升打印效果。
在 CSS 中,可以通过 @media 查询按条件引入打印样式。最常用的方式是使用媒体类型或媒体特性来针对打印环境应用特定样式。
这是最直接的方法,只在打印时生效:
@media print {浏览器在页面打印预览或实际打印时会应用这部分样式,屏幕显示时忽略。
除了判断是否为打印设备,还可以结合其他特性,比如纸张尺寸:
@media print and (max-width: 210mm) {这样可以在小尺寸纸张上调整排版,提升打印效果。
也可以将打印样式写在单独的文件中,并设置 media 属性:
这个文件只在打印时加载,不会影响页面渲染性能。
利用条件引入打印样式,通常用于:
基本上就这些。关键是用好 @media print,让网页在打印时更清晰、专业。