資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 CSS 媒體查詢建立可列印網頁？
我們可以建立一個可列印的網頁，並使用 CSS 媒體查詢 print 屬性 `@media print` 來控制頁面列印預覽中的樣式。`@media print` 是一個 CSS 媒體查詢，允許我們向任何網頁的列印預覽頁面新增頁面樣式。透過使用它，我們可以透過在給定的媒體查詢下將 HTML 元素的“可見性”指定為“可見”或“隱藏”來建立可列印的網頁。我們還可以將任何其他我們希望在列印預覽螢幕中顯示的樣式新增到 `@media print` 查詢中。
語法
@media print {
/* CSS Styles here */
}
這裡，`@media print` 是我們將用於向列印預覽頁面新增樣式的 CSS 媒體查詢。
示例 1
在這個例子中，我們將透過在 `@media print` 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 print` 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”標籤的內容。
更新於：2023年2月22日
502 次瀏覽
廣告