不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。

我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果：

• 使用响应式布局设置打印的效果
• 在合适的时候打印背景图片和颜色
• 添加显示的网址或页面链接，以供参考
• 使用css filter 提高打印的图形效果

针对打印的样式，而不是屏幕显示样式

首先，我们需要使用媒体查询（media query）针对打印样式设置。

重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。

大多数的浏览器会自动根据打印更改颜色，以节省打印原料，但是我们还是尽可能的手工设置一下。

为了达到最佳效果，使颜色清晰明了，我们至少需要包含一下基本的打印样式。

对于打印，大多数情况下我们不需要打印整个页面，只需要打印一个简洁的能够突出需要信息的页面，那么我们将不相关的部分隐藏掉（如：导航条、背景图片）。

在编写打印样式表的时候，你要注意要使用厘米或者英寸作为单位而不是屏幕像素单位，实际的单位对打印非常有用。

为了保证打印样式有用，写CSS样式使打印的内容距离纸张边缘，看起来更好，需要使用 @page 这个语法：

为了保证不被跨页打印，如一个标题和内容在页面底部被分开：

另一中情况是要防止图片过宽而超出纸张边缘：

第三个要点是确保 articles 文章标签的内容，在新的一页开始：

最后，还要注意列表和图片不被分开在不同的页：