0

我希望根据所使用的 css 媒体类型来改变我的 asp .net 网页输出到浏览器的方式。

虽然 css 通常会处理屏幕和打印模式之间的外观差异，但我还想在需要打印模式时对标记进行一些小的调整。我只是将浮动部分放在其兄弟的下方，而不是作为在浏览器中的屏幕布局期间使用的 2 col 方法。

4

4 回答 4

0

所以你的目标是呈现一个模仿“打印预览”的浏览器页面？如前所述，浏览器不会公开媒体类型，因此无法提前查询以更改浏览器的输出。在您的特定情况下，我对 W3C 文档的理解是，“打印”媒体类型仅针对“分页材料和在打印预览模式下在屏幕上查看的文档”触发。这意味着激活屏幕显示的“打印”媒体类型的唯一方法是选择“打印预览”。

当然，一旦您进入“打印预览”，使用媒体查询查看更改后的布局就可以了。这是一个超级简单的示例，可以完成您想做的事情：

款式： 

<style>
ul li {
    float:left;
    margin: 10px;
}
@media print {
    li#printfloat {
        clear:left;
    }
}
</style>

和 HTML：

<ul>
    <li>Sibling 1</li>
    <li id="printfloat">Sibling 2</li>
</ul>
于 2013-10-29T21:33:09.113 回答
0

这是不可能的。没有浏览器以允许您在服务器端更改标记的方式公开此信息（即在发送到浏览器之前）。

浏览器可以根据它对该页面的用途（打印、显示、读取...）来确定要使用的 CSS，但您不知道它会是什么。

考虑更改您的标记，使其适用于屏幕和打印 css。

另一种选择是创建一个print链接，该链接将链接到页面的打印优化版本。

于 2010-10-15T09:35:13.950 回答
0

这不是一个很好的方法，但您可以在其兄弟下方添加浮动部分并将该部分隐藏在屏幕 CSS 文件中。然后在打印 CSS 文件中，您可以显示此隐藏部分并隐藏打印页面中您不想要的另一个部分。

这会导致您的页面有额外的 html，但取决于这个浮动部分是什么，它可能是一个选项。

于 2010-10-15T11:22:20.970 回答
0

如果您的标记是按该顺序编写的以使您的列浮动，但文档的实际格式以不同的方式更有意义，您需要修复您的标记和屏幕 CSS。

MNarkup 不应该依赖于 CSS。首先标记您的文档，以便它在没有 CSS 的情况下有意义 - 在两行之间阅读，这是您希望它显示以进行打印的方式。完成此操作后，根据该源顺序设置列布局样式。

于 2010-10-15T19:23:21.667 回答