这是由打印问题引起的风波, 不过确实弥补了我对css的认识。

问题描述: 在信息打印的界面上需要放置打印按钮或者其他提示性的东西, 然而在正式打印时这些信息又不应该输出(至少打印按钮是不应该出现的)。

问题分析: 这个需求非常正常, 且不说是否每个人都找得到浏览器的打印按钮, 就单是放置那些不应该在正式文档中出现的操作或者其他的提示性信息也是非常有用的, 极大的方便了用户的使用, 至少不用天天听到别人请教打印方法(玩笑)。

正式开始分析, 从结果上来看, 打印前后的内容变化了。第一直观印象就是有两份材料, 打印前显示一份, 打印后显示一份, 这也是我早期时候的解决方法: 对放置在页面上的打印按钮绑定JS函数, 让JS函数把页面上的信息处理干净后调用浏览器的打印功能, 这种办法遇到电脑小白没有任何问题, 但就怕遇到懂行的, 不按常理出牌, 直接采用浏览器的打印功能, 一切玩儿玩儿; 第二种就是一份材料两种显示, 这种解决方案我一直没想过, 也没干往那边想, 在查完资料后发现CSS是支持这种特性的。

解决方案: 采用CSS的Media Queries, 这个功能的作用在于使得网页在不同的媒体上有不一样的显示效果¹, 具体的内容见Airen的博客。

在这里简单的介绍一下如何在用Media的功能来时间打印和分辨率这两个问题:

1.打印里面的问题最常出现的是前后显示的东西不同, 其实我们需要做的就是把正常显示的关闭、把正常不现实的打开就好了, 对这部分的块给定独立的样式, 再在定义打印媒体下面独立定义即可

1
2
3
4
5

@media print {
  noprint {
    display: none;
  }
}

2.当我们需要对待一些特殊分辨率的屏幕时(当浏览器的窗口关小了也一样), 我们主需要再创立一套针对这个分辨率的css样式即可, 不用在用JS, 把所有问题交给浏览器自己解决

1
2
3
4
5

@media screen and (max-width: 600px) {
  选择器 {
    属性: 属性值;
  }
}

参考文档:

1. Airen 的 CSS3 Media Queries, http://www.w3cplus.com/content/css3-media-queries