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