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

 所属分类:web前端开发

 浏览:69次-  评论: 0次-  更新时间:2023-09-14
描述:更多教程资料进入php教程获得。 我们可以创建一个可打印&#3034...
更多教程资料进入php教程获得。

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

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

语法

1
2
3
@media print {
   /* CSS Styles here */
}

这里,@media print 是 CSS 媒体查询,我们将使用它向打印预览页面添加样式。

示例 1

在此示例中,我们将通过在 @media 打印 CSS 查询中将“可见性”设置为“可见”,在网页的打印预览中显示“p”标签的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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”标签的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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”标签的内容。

 标签:
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!