我们可以创建一个可打印的网页，并使用 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? @media print { p { visibility: visible; } }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? @media print { p { visibility: hidden; } }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”标签的内容。
以上就是如何使用 CSS 媒体查询创建可打印的网页？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625902.html
微信扫一扫 
支付宝扫一扫 
