CSS 中的@media print 是干什么用的?

@media print { ... } 是CSS中的一个媒体查询,它专门用于定义当内容被打印到纸张上时应该应用的样式规则。在这个查询块内,你可以设置各种样式,以确保打印输出的内容看起来整洁、专业,并且只包含必要的信息。

在你给出的例子中:

css 复制代码
@media print {
    header, footer {
        display: none;
    }
}

这段代码的意思是,当网页内容被发送到打印机进行打印时,页面上的所有<header><footer>元素都将被隐藏(即不显示在打印的页面上)。这是通过将这些元素的display属性设置为none来实现的。

这种做法通常很有用,因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息,但在打印版本中,这些信息可能并不必要,甚至可能占用宝贵的页面空间。

此外,你还可以在@media print查询中定义其他样式规则,比如改变字体大小、颜色(尽管打印机通常只能打印单色,但定义颜色是个好习惯,以防将来支持彩色打印)、边距、分页控制等,以确保打印输出的内容既美观又易于阅读。

例如,你可能还想隐藏某些不重要的元素,如广告、侧边栏或仅用于装饰的图片,同时增加标题和段落的字体大小,以及为页面添加页眉和页脚(但这次是在打印样式中自定义的,与网页上的不同)。

相关推荐
可乐鸡翅yeah_27 分钟前
hls.js 多实例并发踩坑,多视频页面播放器内存与冲突问题解决
开发语言·前端·javascript·音视频·hls·m3u8·m3u8在线播放
dsyuan00129 分钟前
基于 Vue3 + ElementPlus 极简搭建仿钉钉流程设计器,简洁架构、极易扩展,纯div+css布局
css·架构·钉钉
涛涛ing36 分钟前
你的页面为什么总是卡成PPT?2026年,90%的前端都忽略了主线程
前端
SoaringHeart37 分钟前
Flutter 进阶 | 组件封装:用 CustomPainter 实现光环动画组件AnimatedHalo
前端·flutter
IT_陈寒42 分钟前
JavaScript的隐式转换太坑了,我的==比较怎么就炸了?
前端·人工智能·后端
雪芽蓝域zzs1 小时前
第十四节:后端返回权限动态路由
前端·javascript·vue.js
Rain5091 小时前
谁动了我的 URL?——记一次微前端“灵异 Bug“的排查实录
前端·vue.js·人工智能·前端框架·bug·ai编程
bjzhang751 小时前
使用HTML+CSS美化上传进度条展示
前端·css·html
何以解忧,唯有..2 小时前
Vue 3 响应式核心:ref() 与 reactive() 的深入解析与实战
前端·javascript·vue.js
晴天162 小时前
Chrome DevTools Protocol(CDP)分享-Day36
前端·chrome·chrome devtools