需求来临
一天，BOSS来找你做个页面，要求如下：
BOSS： 我们这个页面，用户会打印，顺便提两个小要求
要求1: 打印出来的东西只看到内容，不要出现闲杂等。
要求2: 打印出来的效果要保证，最好和网页上一样。
你听到了，笑而不语，这也太简单了！
对于要求1, 用一CSS点样式就很快的解决了。
@media print {
.xxx {
display: none;
}
}
对于要求2，疑惑了一下，难道打印出来会有不同吗？
于是，你点了一下 Chrome浏览器的打印菜单，弹出了一个打印预览,发现效果… 真的没法看！！
这可如何是好？
分辨率
为了不浪费打印纸，于是能过搜索了解了下，大概就道了原因：分辨率！
分辨率，在打印领域就是 DPI 和 PPI，一般使用电脑屏幕打印，就用PPI为单位，与像素对应。
你手上刚好有个 14寸 的笔记本电脑，屏幕还不错，最高可以设置到 3840 x 2160 ，于是你练练手计算一下。
| 屏幕分辨率 | PPI | 屏幕效果 |
|---|---|---|
| 3840 x 2160 | 314.7 | 网页上的字太小，基本很难看清啦 |
| 1920 x 1080 | 157.4 | 字有点小，但还能看，就是费力 |
| 1280 x 720 | 104.9 | 这个看着舒服多了，看页面不费力 |
| 1024 x 720 | 89.4 | 字是很大，就是不够细腻，而且很多网页宽度都跑不满了 |
PPI越高，显示在显示器上的内容就越多，而人眼里面看到的东西就会变的越小，但会越细腻精致。
号外：系统放大
关于PPI的知识点就是这个公式，但你还想了解更多，于是又开始一小段与打印无关的搜索：
你很喜欢细腻的显示效果，但你也不想东西看起来很小，能办到吗？
于是你去设置分辨率，信息的看到到屏幕分辨率设置的上面，还有一个放大的选项！
设置了屏幕分辨率为 3840 x 2160，然后放到到2倍大小，发现显示的内容和1920 x 1080竟然一样多了，而且显示的效果精致了许多！！
这是怎么回事？难道上分辨率算法出问题了吗？
当然，对于文字理解还不错的你，已经秒懂了：这是操作系统做的一点小优化。
设置到2倍放大效果后，
原先你的文字大小是16px,在显示时会使用 36px进行显示，原来你的宽度是1920px，显示时会使用3840个像素进行显示。
你的PPI还是314.7，但只显示了157.4时的内容，所有内容都进行了等比放大，看上去当然细腻多了！
这也是很多手机都是几千几千的分辨率，一行也没见显示的字数比电脑多，但就是比电脑屏幕看起来清晰的原因。
号外：视网膜屏幕
2010年，乔布斯年iPhone4发布会上首次推出的这个术语，视网膜屏幕，就是将 960×640 的像素压缩到一个3.5寸的显示屏内。(PPI = 326)
号称 PPI 达到300之后，人眼的视网膜已经无法区分更高的区别了。
后来证明，乔布斯在胡说，真实数据要高于300PPI。不管怎样，300PPI已经深入人心了。
也就是说，你的14寸屏幕调到 3840 x 2160 分辨率后，PPI也可达到300左右，显示效果就和手机上一样了。
不过在都2020了，300PPI个这级别的PPI现在都是低配了，很多千元机都可以做到300PPI，高端机更有500多PPI的。
打印分辨率
你已经知道了电脑上的分辨率，那么打印时的分辨率又是多少呢？
其实这个系统已经帮你默认好了，这个值在PC上面是96, 在Mac上面是72。
非专业人专不会关心这个分辨率，所你想到了一个生活中的小例子：
手机, 一样的手机有普通模式和老人模式！
如果你给你爸妈用，就算不调成老人模式，也会帮他们把字体调到很大，这样他们才能看起来很轻松。
所以，你又要考虑一下你的用户将网页打印出来是做什么用，给谁看，用来做什么？
对于这个值，大多数人也没有太多研究，于是你估摸着总结一下。
- 要是低于60时，会打出像小学语文课本一样的大字效果。
- 正常字号正常行距正常打印下，可以说是万金油，适合所有人看。
- 要是高于120时，就会打出小报纸一样密密麻麻的效果。
各种PPI下的示例
实际打印中，也不会去改这个默认的分辨率，所以，你要做的是修改你网页面中的字体大小，主要就是标题、普通文本的字号。
打印纸
你问了下BOSS，打印到什么样的规格的纸上，BOSS略感欣慰，答了一声： A4!
你手上刚好有一张A4纸，捧起来看了看，21厘米 x 29.7厘米（210mm×297mm）
于是，根据上面的知识和国际规范（PPI=96，正文字号=16px），掐指一算：
网页宽度是794px，如果没有任何边距，一行可以放下49个字！多一点空白！
打印测试
- 为了验证想法，于是，你自己写了一个简单的html。
<!DOCTYPE html>
<html>
<head>
<title>打印测试</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
font-size: 16px;
}
</style>
</head>
<body>
一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
</body>
</html>
- 用 Chrome 打开后，再次点击打印菜单
在打印的纸张尺寸里面选择A4发现如你所料，打印预览那边，一行就是49个字，多一点点空！
- 这时，你关掉了打印预览，然后缩放了Chrome浏览器，拉到了794px，也就是刚刚一排能显示49个半字的宽度。
你把手机的A4纸，拿起来和电脑屏幕上的Chrome浏览器比较了一下。
如果此时，你的PPI和96差不多，可以拿差A4纸在屏幕上比划一下，浏览器的宽度就行这张A4纸的宽度差不多！
结论
想看到打印时的效果，最简单的方法就是把浏览器的宽度调到794px，在此环境下进行开发，高度就不用在意了，打印出来会自动分页。
当然，你不需要真的这种憋屈，最好是响应式布局，测试的时候调整到这个宽度看一下就行。
但你的BOSS说过，最好打钱出来的效果就和网页上一样！
聪明的你当然觉得这个要求也非常简单，只要设置一个窗口，宽度为 794px，所有的内容都放在这个容器里，大功告成。
或是你想要页面效果就要与打印出来的效果完全一致，那你就布一个容器就行了，也不需要调网页,如下:
<!DOCTYPE html>
<html>
<head>
<title>打印测试</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#print{
width:794px;
margin: 0 auto;
padding: 0 12px;
}
</style>
</head>
<body>
<div id="print">
<h1>标题</h1>
<p>内容</p>
<p>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十</p>
</div>
</body>
</html>
你看到页面一行显示多少字，打印预览里面也还是那么多字，完全一致！搞定！
其它打印大小
解决了A4的问题，其实就可以举一反一百了，不管是A3,A4,A5,A6 还是国标美标日标，或者是自定义票据账目，都可以通过宽度和字号来达到想要的打印效果。
