我們可以創(chuàng)建一個可打印的網(wǎng)頁，并使用 CSS 媒體查詢打印屬性 @media print 控制頁面打印預(yù)覽中的樣式。 @media print 是一個 CSS 媒體查詢，它允許我們將頁面樣式添加到任何網(wǎng)頁的打印預(yù)覽頁面。使用此功能，我們可以通過在給定媒體查詢下將 HTML 元素的“可見性”指定為“可見”或“隱藏”來創(chuàng)建可打印的網(wǎng)頁，我們還可以在打印預(yù)覽屏幕中添加我們想要的任何其他樣式@media 打印查詢。
語法
@media print {
/* CSS Styles here */
}
登錄后復(fù)制
這里，@media print 是 CSS 媒體查詢，我們將使用它向打印預(yù)覽頁面添加樣式。
示例 1
在此示例中，我們將通過在 @media 打印 CSS 查詢中將“可見性”設(shè)置為“可見”，在網(wǎng)頁的打印預(yù)覽中顯示“p”標(biāo)簽的內(nèi)容。
<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>
登錄后復(fù)制
示例 2
在此示例中，我們將通過在 @media 打印 CSS 查詢中將“可見性”設(shè)置為“隱藏”，在網(wǎng)頁的打印預(yù)覽中隱藏“p”標(biāo)簽的內(nèi)容。
<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>
登錄后復(fù)制
結(jié)論
在本文中，我們了解了 @media print CSS 媒體查詢，并在兩個不同示例的幫助下使用它創(chuàng)建了可打印的網(wǎng)頁。在第一個示例中，我們在打印預(yù)覽頁面中顯示“p”標(biāo)簽的內(nèi)容，在第二個示例中，我們在打印預(yù)覽頁面中隱藏“p”標(biāo)簽的內(nèi)容。
以上就是如何使用 CSS 媒體查詢創(chuàng)建可打印的網(wǎng)頁？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
