数据结构
网络
关系数据库管理系统 (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 次浏览
广告