语法@media print { /* css styles here */}
这里，@media print 是 css 媒体查询，我们将使用它向打印预览页面添加样式。
示例 1在此示例中，我们将通过在 @media 打印 css 查询中将“可见性”设置为“可见”，在网页的打印预览中显示“p”标签的内容。
<html lang=en><head> <title>how to create printable webpage using css media queries?</title> <style> @media print { p { visibility: visible; } } </style></head><body> <h3>how to create printable webpage using css media queries?</h3> <p>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!</p></body></html>
示例 2在此示例中，我们将通过在 @media 打印 css 查询中将“可见性”设置为“隐藏”，在网页的打印预览中隐藏“p”标签的内容。
<html lang=en><head> <title>how to create printable webpage using css media queries?</title> <style> @media print { p { visibility: hidden; } } </style></head><body> <h3>how to create printable webpage using css media queries?</h3> <p>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!</p></body></html>
结论在本文中，我们了解了 @media print css 媒体查询，并在两个不同示例的帮助下使用它创建了可打印的网页。在第一个示例中，我们在打印预览页面中显示“p”标签的内容，在第二个示例中，我们在打印预览页面中隐藏“p”标签的内容。
以上就是如何使用 css 媒体查询创建可打印的网页？的详细内容。