打印网页:使网页在纸上看起来美观

主要观点:构建网页的重要部分是使体验具有响应性,不仅要考虑不同视口尺寸,还要考虑不同媒介。CSS 中的打印样式表常被忽视,但很重要,包括可访问性、旅行需求、法律义务等方面。需注意测试打印样式,可使用不同方法设置媒体查询,且打印模拟并非完全准确。同时要运用物理绝对单位,利用@page规则设置页面选项,处理好页面断行(如break-after等属性)、孤行寡妇问题,注意元素边框在分页时的显示,考虑交互性(如处理链接、表单等),注意颜色和墨水使用(检查黑白打印效果、去除多余内容等)。

关键信息

  • 打印样式的设置方法,如@media print@import url("stylesheet.css") print等。
  • 不同浏览器的打印模拟方法,如 Microsoft Edge、Google Chrome、Firefox、Safari 等。
  • 物理绝对单位及其在打印中的应用。
  • @page规则用于设置页面大小、边距等。
  • 处理页面断行的属性及值。
  • orphanswidows属性及限制。
  • 元素边框在分页时的处理。
  • 交互性方面的注意事项,如处理链接、表单等。
  • 颜色和墨水使用的注意事项,如检查黑白打印效果、去除多余内容等。

重要细节

  • 并非所有人都能长时间看屏幕,有人喜欢纸质阅读,旅行时可能无网络和电力,某些组织有保留纸质副本的政策等,所以需要打印样式。
  • 相对单位在打印时会缩放,绝对单位在物理打印时通常更准确。
  • @page规则的新可用性及相关示例。
  • 不同浏览器中处理页面断行属性的差异及限制。
  • 一些属性已被弃用但仍在使用。
  • 不同浏览器中打印模拟的相关按钮及注意事项。
  • 颜色和墨水使用对打印效果和成本的影响等。
阅读 51
0 条评论