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

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

在你给出的例子中:

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

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

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

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

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

相关推荐
糕冷小美n4 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥4 小时前
Technical Report 2024
java·服务器·前端
沐墨染4 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion4 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks4 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼5 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴5 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
Aliex_git7 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕7 小时前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北7 小时前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript