我們可以建立一個可列印的網頁，並使用 CSS 媒體查詢列印屬性 @media print 控制頁面列印預覽中的樣式。 @media print 是一個 CSS 媒體查詢，它允許我們將頁面樣式新增到任何網頁的列印預覽頁面。使用此功能，我們可以透過在給定媒體查詢下將HTML 元素的「可見性」指定為「可見」或「隱藏」來建立可列印的網頁，我們也可以在列印預覽畫面中新增我們想要的任何其他樣式@media 列印查詢。
@media print {
/* CSS Styles here */
}
這裡，@media print 是 CSS 媒體查詢，我們將使用它來為列印預覽頁面新增樣式。
在此範例中，我們將透過在 @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>
在此範例中，我們將透過在 @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中文網其他相關文章！
