主要观点:构建网页的重要部分是使体验具有响应性,不仅要考虑不同视口尺寸,还要考虑不同媒介。CSS 中的打印样式表常被忽视,但很重要,包括可访问性、旅行需求、法律义务等方面。需注意测试打印样式,可使用不同方法设置媒体查询,且打印模拟并非完全准确。同时要运用物理绝对单位,利用@page
规则设置页面选项,处理好页面断行(如break-after
等属性)、孤行寡妇问题,注意元素边框在分页时的显示,考虑交互性(如处理链接、表单等),注意颜色和墨水使用(检查黑白打印效果、去除多余内容等)。
关键信息:
- 打印样式的设置方法,如
@media print
、@import url("stylesheet.css") print
等。 - 不同浏览器的打印模拟方法,如 Microsoft Edge、Google Chrome、Firefox、Safari 等。
- 物理绝对单位及其在打印中的应用。
@page
规则用于设置页面大小、边距等。- 处理页面断行的属性及值。
orphans
和widows
属性及限制。- 元素边框在分页时的处理。
- 交互性方面的注意事项,如处理链接、表单等。
- 颜色和墨水使用的注意事项,如检查黑白打印效果、去除多余内容等。
重要细节:
- 并非所有人都能长时间看屏幕,有人喜欢纸质阅读,旅行时可能无网络和电力,某些组织有保留纸质副本的政策等,所以需要打印样式。
- 相对单位在打印时会缩放,绝对单位在物理打印时通常更准确。
@page
规则的新可用性及相关示例。- 不同浏览器中处理页面断行属性的差异及限制。
- 一些属性已被弃用但仍在使用。
- 不同浏览器中打印模拟的相关按钮及注意事项。
- 颜色和墨水使用对打印效果和成本的影响等。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。