在打印视图中无法获取我的自定义 css (ctrl + p)

Question

我用我的自定义 css 创建了简单的 html 页面。 但在打印模式下（ctrl+p），预览不显示 css 并获取仅包含 html 元素的内容。

我使用了media="all"，但无法使用。我该怎么办？

Answer 1

当您说自定义 CSS 时，我假设您希望打印视图样式不同于屏幕视图样式。为此，您无需在link 标记中指定任何类型的media。相反，您可以通过 @media print { myStyles } 将打印媒体查询添加到您的 CSS。如果您有多个应在不同情况下应用的不同样式表，则只需在link 标记中指定media。

当你运行下面的 sn -p 时，p 标签文本会在你进入打印视图时从黑色字体颜色变为红色。

.container {
  border: 1px solid red;
  min-height: 100%;
  min-width: 100%;
}

p {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

@media print {
  p {
    color: red;
  }
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

如果您不希望打印视图 CSS 与屏幕视图 CSS 不同，则无需执行任何特殊操作。除非您明确指定，否则 CSS 默认媒体查询适用于所有内容。