网页打印友好型HTML结构设计与维护指南-html教程-PHP中文网

直接套用屏幕布局会毁掉打印效果，因chrome等浏览器打印引擎不支持flex、column-count等布局的分页逻辑，导致表格劈开、多列塌缩等问题；须改用grid、显式设置break-inside: avoid，并严格遵循@media print规则与@page声明。

网页打印友好型html结构设计与维护指南

为什么直接套用屏幕布局会毁掉打印效果

因为浏览器打印引擎（尤其是 Chrome PDF 导出）对 display: flex、column-count、浮动和绝对定位几乎不支持分页逻辑。你看到的预览正常，不代表导出 PDF 后不崩——常见现象包括表格行被劈开、多列塌缩到一页底部、导航栏残留、图片撑爆纸张。

根本原因不是 CSS 写得不够细，而是这些布局模型本身不参与 CSS 分页上下文：page-break-inside 和 break-inside 对它们基本无效。

彻底禁用 display: flex 和 column-count 在打印区域内的核心容器
改用 display: grid，并为每个子项显式设置 break-inside: avoid
所有打印相关样式必须包裹在 @media print { } 内，不能靠 class 切换
测试必须导出为 PDF（Chrome → “另存为 PDF”），仅看预览会漏掉 80% 的问题

@media print 规则总不生效？先查这三处

@media print 失效最常是因为位置或加载顺序错误，而不是写法不对。开发者工具里看不到规则，大概率是解析阶段就被跳过了。

别把 @media print 写在 @import 之后——CSS 规范要求 @import 必须在最前，否则整个块被忽略
避免用内联 style 标签写 @media print，优先用 <link rel="stylesheet" media="print" href="print.css">
检查路径是否正确、是否被 CORS 拦截（尤其在线编辑器如 CodePen）、Safari 是否静默丢弃了 @page

验证方法：打开 Elements 面板，选中任意元素，在右侧 Styles 面板里搜索 @media print，确认规则是否列出且未被 strike-through。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

表格跨页断裂、表头消失的硬解法

这不是 bug，是浏览器默认允许 <tr> 跨页渲染，且 <code><thead> 在 flex/grid 容器里会被降级为普通块级元素，失去重复逻辑。 <ul><li>给 <code><tr> 加 <code>page-break-inside: avoid（必须写在 @media print 里）

确保 <table> 使用 <code>border-collapse: collapse

显式声明 thead { display: table-header-group; }，不是 table-row-group

长横向表格加 @page { size: landscape; }，并设容器 max-width: none

注意：@page 不能嵌套在 @media print 内，必须平级声明，否则完全不生效。