我們可以創建一個可打印的網頁，并使用 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 媒體查詢創建可打印的網頁？的詳細內容，更多請關注www.92cms.cn其它相關文章！
