如何使用 CSS 媒体查询创建可打印的网页？

百变鹏仔 3个月前 (09-20) #CSS

文章标签如何使用

我们可以创建一个可打印的网页，并使用 CSS 媒体查询打印属性 @media print 控制页面打印预览中的样式。 @media print 是一个 CSS 媒体查询，它允许我们将页面样式添加到任何网页的打印预览页面。使用此功能，我们可以通过在给定媒体查询下将 HTML 元素的“可见性”指定为“可见”或“隐藏”来创建可打印的网页，我们还可以在打印预览屏幕中添加我们想要的任何其他样式@media 打印查询。

语法

@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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></body></html>

结论

在本文中，我们了解了 @media print CSS 媒体查询，并在两个不同示例的帮助下使用它创建了可打印的网页。在第一个示例中，我们在打印预览页面中显示“p”标签的内容，在第二个示例中，我们在打印预览页面中隐藏“p”标签的内容。

文章推荐

如何使用 CSS 媒体查询创建可打印的网页？

语法

示例 1

示例 2

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写