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

我们可以使用CSS媒体查询打印属性@media print来创建可打印的网页，并在页面的打印预览中控制样式。@media print是一个CSS媒体查询，允许我们在任何网页的打印预览页面中添加页面样式。通过在给定的媒体查询下将HTML元素的“visibility”属性设置为“visible”或“hidden”，我们可以创建可打印的网页。我们还可以将任何其他我们希望在打印预览屏幕中出现的样式添加到@media print查询中。

语法

@media print {
   /* CSS Styles here */
}

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

示例1

在这个示例中，我们将通过在@media print CSS查询中将“p”标签的“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查询中将“p”标签的内容的“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>