当前位置：文江博客话题详情

关于调试打印样式表的建议？

发布于 2024-08-25 11:01:32 字数 352 浏览 11 评论 0原文

我最近一直在为一个网站制作打印样式表，我意识到我不知道如何有效地调整它。在屏幕布局上工作有一个重新加载周期是一回事：

更改代码
命令选项卡
重新加载

，但是当您尝试打印时，整个过程会变得更加艰巨：

更改代码
命令选项卡
重新加载
打印
在打印时眯眼-预览图像
在预览中打开 PDF 进行进一步检查

我是否遗漏了哪些工具？ WebKit 的检查器是否有“假装这是分页媒体”复选框？ Firebug (shudder) 有什么魔法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅暮の光 2024-09-01 11:01:32

Chrome 的检查器中有一个选项。

打开 DevTools 检查器（mac：Cmd + Shift + C，windows：Ctrl + Shift< /kbd> + C)
单击切换设备模式图标
单击浏览器视口右上角的更多覆盖 图标打开开发工具抽屉。
然后，在模拟抽屉中选择媒体，并选中CSS媒体复选框。

这应该可以解决问题。

更新：DevTools 中的菜单已更改。
现在可以通过点击右上角的“三点”菜单> >找到它。更多工具>>渲染设置>模拟媒体>打印。

来源：Google DevTools 页面*

回复收藏 0 原文

记忆で 2024-09-01 11:01:32

我假设您希望在不使用 HTML 到 PDF 方法的情况下尽可能多地控制打印窗口...使用 @media screen 进行调试 - @media print for Final css

现代浏览器可以让您快速了解将要发生的情况在打印时在 @media 查询 中使用英寸和磅发生。

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

一旦您的浏览器显示“英寸”，您就会更好地了解会发生什么。这种方法应该可以结束打印预览方法。所有打印机都可以使用 pt 和 in 单位，并且使用 @media 技术将允许您快速查看将要发生的情况并进行相应调整。 Firebug（或同等产品）绝对会加快这个过程。当您将更改添加到 @media 后，您就获得了使用 media = "print" 属性链接 CSS 文件所需的所有代码 - 只需将 @media 屏幕规则复制/粘贴到引用的文件。

祝你好运。网络不是为打印而构建的。创建一个解决方案来提供与浏览器中看到的内容相同的所有内容、样式有时是不可能的。例如，主要面向 1280 x 1024 受众的流畅布局并不总是能轻松转化为美观整洁的 8.5 x 11 激光打印。

purusal 的 W3C 参考：http://www.w3.org/TR/css3-mediaqueries/< /a>

I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use @media screen to debug - @media print for final css

Modern browsers can give you a quick visual for what's going to happen at print time using inches and pts in a @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the @media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to @media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the @media screen rules to the referenced file.

Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.

W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/

回复收藏 0 原文

离笑几人歌 2024-09-01 11:01:32

Chrome 48 您可以在渲染选项卡中调试打印样式。

单击检查器右上角的菜单图标和渲染设置。

编辑
对于 Chrome 58，位置已更改为 Web Inspector >菜单>更多工具>>渲染

回复收藏 0 原文

静待花开 2024-09-01 11:01:32

在 Chrome v41 中，它就在那里，但位置略有不同。

在此处输入图像描述

回复收藏 0 原文

奶茶白久 2024-09-01 11:01:32

有一种简单的方法可以调试打印样式表，而无需切换 HTML 代码中的任何媒体属性（当然，正如所指出的，它不能解决宽度/页面问题）：

使用 Firefox + Web Developer 扩展。
在 Web 开发人员菜单中，选择 CSS / 按媒体类型显示 CSS / 打印
返回到 Web 开发人员菜单，选择选项 / 保留功能

现在您正在查看打印 CSS，并且可以无限期地重新加载页面。
完成后，取消选中“持久功能”并重新加载，您将再次获得屏幕 CSS。

HTH。

回复收藏 0 原文

耶耶耶 2024-09-01 11:01:32

从 v53 开始，Chrome 的用户界面再次有所不同。

我不需要经常使用这个功能，但每当我使用时，我都会花很长时间才能弄清楚自上次我刻录周期试图追踪它以来 Chrome 团队已将其移至何处。

请注意，这是开发工具窗格中的...菜单而不是Chrome浏览器窗格中的...菜单。

现在在渲染部分向下滚动。它通常位于首屏下方。

回复收藏 0 原文

草莓味的萝莉 2024-09-01 11:01:32

根据 rflnogueira 的回答，当前的 Chrome 设置 (40.0.*) 如下所示：

chrome print css emulation

回复收藏 0 原文

一江春梦 2024-09-01 11:01:32

只需在调试时使用 media="screen" 在浏览器中显示打印样式表即可。打印预览视图使用与正常浏览模式相同的渲染引擎，因此您可以使用它获得准确的结果。

回复收藏 0 原文

末が日狂欢 2024-09-01 11:01:32

2019 - 更新说明

打开 Chrome 检查器
- 来自Mac => 选项 + 命令 + i
- 来自Windows => F12
点击小3点，自定义和控制devTools
选择更多工具
选择渲染
滚动到底部模拟CSS媒体
从向下箭头选择打印

回复收藏 0 原文

初懵 2024-09-01 11:01:32

如果您有一个打印函数，可以将页面内容重写到一个新窗口并引用您的打印样式表，您将更好地了解它在纸上的样子，并且您将能够对其进行调试也有像萤火虫这样的人。

这是如何使用 JavaScript / jquery 完成此操作的示例

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.

Heres an example of how this can be done with JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

回复收藏 0 原文