如何使用 CSS 媒体查询创建可打印的网页？(1)

📌 相关文章

📜 如何使用 CSS 媒体查询创建可打印的网页？(1)

📅 最后修改于: 2023-12-03 14:51:51.685000 🧑 作者: Mango

如何使用 CSS 媒体查询创建可打印的网页？

在大多数情况下，网页被设计用来在屏幕上展示，但有时候我们需要将网页打印出来。为了让网页在打印时能够更好地适应纸张，我们需要使用 CSS 媒体查询来为打印样式设置样式规则。

媒体查询

首先，了解一下什么是媒体查询。CSS 媒体查询是一个用于检测特定设备或浏览器视口参数的 CSS 技术。我们可以使用媒体查询为不同的设备或参数定义不同的样式规则。

下面是一个简单的媒体查询示例：

@media print {
  * {
    color: black !important;
    background: none !important;
  }
  a, a:visited {
    color: #444 !important;
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  img {
    max-width: 100% !important;
  }
  body {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4;
  }
  @page {
    margin: 0;
  }
}

上面的代码是一个针对打印样式的媒体查询。它使用了 @media print 语句来指定在打印时应用的样式规则。例如，为了确保打印时链接可读，我们将其背景设置为 none，并将其颜色设置为黑色，使用 !important 以确保规则生效。

创建可打印的网页样式表

为了创建可打印的样式表，我们可以按照以下步骤进行操作。

创建一个新的样式表，并将其命名为 print.css。
在 print.css 文件中，使用媒体查询语句 @media print 来指定在打印时应用的样式规则。

例如，为了确保打印时页面的背景不会打印出来，我们可以将其设置为灰色：

@media print {
  body {
    background-color: #f3f3f3;
  }
}

按需为打印样式表添加其他样式规则。例如，为了确保打印时表格正确显示，可以使用以下样式规则：

@media print {
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
}

在网页的 <head> 标签中，使用以下代码来引用打印样式表：

<link rel="stylesheet" href="print.css" media="print">

这将确保打印样式表仅在打印时使用。

结论

使用 CSS 媒体查询可以轻松创建可打印的网页。我们可以使用媒体查询语句 @media print 来为打印样式表指定样式规则，并确保这些规则仅在打印时生效。通过为表格、链接、背景等添加样式规则，可以使网页在打印时更易于阅读和使用。