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

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

语法

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

这里，@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>