如何使用 CSS 媒體查詢建立可列印的網頁？-css教學-PHP中文網

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

WBOY

發布： 2023-09-10 08:21:02

轉載

945 人瀏覽過

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

登入後複製