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

cssweb developmentfront end technology更新于 2025/1/25 18:52:17

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

语法

@media print {
    /* CSS 样式在此 */
}

此处，@media print 是我们将用于向打印预览页面添加样式的 CSS 媒体查询。

示例 1

在此示例中，我们将通过在 @media print CSS 查询中将"visibility"设置为"visible"，在网页的打印预览中显示"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 print CSS 查询中将"visibility"设置为"hidden"，在网页的打印预览中隐藏"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>