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

Question

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

我用过media="all"但不能工作，我该怎么办？

Answer 1

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

当您运行以下代码段时，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 默认将媒体查询应用于所有内容。