我们可以创建一个可打印的网页，并使用 CSS 媒体查询打印属性 @media print 控制页面打印预览中的样式。 @media print 是一个 CSS 媒体查询，它允许我们将页面样式添加到任何网页的打印预览页面。使用此功能，我们可以通过在给定媒体查询下将 HTML 元素的“可见性”指定为“可见”或“隐藏”来创建可打印的网页，我们还可以在打印预览屏幕中添加我们想要的任何其他样式@media 打印查询。
语法
@media print {
/* CSS Styles here */
}
这里，@media print 是 CSS 媒体查询，我们将使用它向打印预览页面添加样式。
示例 1
在此示例中，我们将通过在 @media 打印 CSS 查询中将“可见性”设置为“可见”，在网页的打印预览中显示“p”标签的内容。
How to create printable webpage using CSS media queries? How to create printable webpage using CSS media queries?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!
立即学习“前端免费学习笔记（深入）”；
通用企业网站系统开源程序完整版1.0下载通用企业建站系统是永州睿拓信息企业网站管理系统包括了企业网站常用的各种功能，带完整的后台管理系统，本程序无任何功能限制下载即可使用，具体功能如下。 1.网站首页 2.会员注册 3.新闻文章模块 4.产品图片展示模块 5.人才招聘模块 6.在线留言模块 7.问卷调查模块 8.联系我们模块 系统管理: 你的域名/admin 帐号：123 管理密码：123
示例 2
在此示例中，我们将通过在 @media 打印 CSS 查询中将“可见性”设置为“隐藏”，在网页的打印预览中隐藏“p”标签的内容。
How to create printable webpage using CSS media queries? How to create printable webpage using CSS media queries?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!
立即学习“前端免费学习笔记（深入）”；
结论
在本文中，我们了解了 @media print CSS 媒体查询，并在两个不同示例的帮助下使用它创建了可打印的网页。在第一个示例中，我们在打印预览页面中显示“p”标签的内容，在第二个示例中，我们在打印预览页面中隐藏“p”标签的内容。
