首頁 > 文章 > web前端 > 如何使用 CSS 媒體查詢建立可列印的網頁？

如何使用 CSS 媒體查詢建立可列印的網頁？

WBOY轉載: 2023-09-10 08:21:02996瀏覽

如何使用 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>
</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>
</body>
</html>

結論

在本文中，我們了解了 @media print CSS 媒體查詢，並在兩個不同範例的幫助下使用它創建了可列印的網頁。在第一個範例中，我們在列印預覽頁面中顯示「p」標籤的內容，在第二個範例中，我們在列印預覽頁面中隱藏「p」標籤的內容。

以上是如何使用 CSS 媒體查詢建立可列印的網頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html print

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何改變CSS中的連結顏色？下一篇：如何改變CSS中的連結顏色？

看更多