HTML和CSS文档的屏幕与打印行为

6tqwzwtp 于 2022-12-24 发布在其他

关注(0)|答案(4)|浏览(154)

我试图理解屏幕与打印行为。APSW docs在打印与屏幕中看起来不同的原因是什么？（在打印中，目录列消失，主列占据了整个打印宽度）
（我试图调试我的sphinx文档，它没有这种行为，但我想如果我能理解一个正常工作的文档，我就能找出为什么我的文档没有。）
需要注意的是，在仔细查看了回答问题的人引用的basic.css中的@media print部分后，我的basic.css和APSW中的有一行不同：

div.bodywrapper {
    margin: 0 !important;
    width: 100%;
}

我的basic.css中缺少!important修饰符，这导致margin: 0被覆盖。

css

来源：https://stackoverflow.com/questions/1901718/screen-vs-print-behavior-for-an-html-and-css-document

4条答案

按热度按时间

1bqhqjot1#

这是使用media types完成的。使用media types，您可以将样式规则限制到特定的输出设备，如屏幕、打印机或手持设备。http://apsw.googlecode.com/svn/publish/_static/basic.css

赞(0）回复(0）举报 2022-12-24

7kqas0il2#

它链接到media type。
您可以将其链接到一组属性：

@media screen {
    body { font-size: 13px }
  }

或整个样式表

<link href="blah.css" media="all" rel="stylesheet" type="text/css" />

在您的情况下：

@media print {
    div.document,
    div.documentwrapper,
    div.bodywrapper {
        margin: 0 !important;
        width: 100%;
    }

    div.sphinxsidebar,
    div.related,
    div.footer,
    #top-link {
        display: none;
    }
}

赞(0）回复(0）举报 2022-12-24

b09cbbtk3#

他们有“媒体规则”。

赞(0）回复(0）举报 2022-12-24

ccgok5k54#

请看：http://apsw.googlecode.com/svn/publish/_static/basic.css
它们通过@import url（"basic.css"）在样式表中包含另一个css文件;

赞(0）回复(0）举报 2022-12-24