网页打印样式CSS
相信大多数的前端工程师都是处理显示屏上面的设计,用到最多的计量单位就是px,但是有些时候,我们难免也会有打印的需求,比如一个电商平台的“物流配送打印单”,“打印订单”等等可能都是需要从网友上打印出来的,这个时候如果还是按照自己以前写网页的思路写打印单页面,最后打印出来的效果会不是很理想。下面我们就来看看有什么注意的事项。
一、在说之前!我们先来理解两个概念,一个是px,一个是pt
1、px就是表示pixel,像素,是屏幕上显示数据的最基本的点;px是一个点,它不是自然界的长度单位,可以画的很小,也可以很大。如果点很小,那画面就清晰,称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对长度”。
2、pt就是point,是印刷行业常用单位,等于1/72英寸,确切的说法是一个专用的印刷单位“磅”,以它是一个自然界标准的长度单位,也称为“绝对长度”。
在网页设计中,用户的屏幕的基本单位是px,因此用px作为单位是最简单也最容易理解的,而用pt作为单位也不过是通过了Windows的设置乘上了一个比率转变成px再显示。
如果使用Word和Photoshop的主要目的仅仅是为了输出打印。使用pt就更方便,当打印到实体时,pt作为一个自然长度单位就方便实用了:比如Word中普通的文档都用“宋体 9pt”,标题用“黑体 16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。
总结:
px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便;
pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
em:即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。
PPI(DPI):pixel(dot)per inch,每英寸的像素(点)数,是一个率,表示了“清晰度”,“精度”
PX和PT转换的公式:
以前在文章中介绍过PX和PT的转换规则,pt=px乘以3/4。 如12px×3/4=9pt大小。 PX和em转换的公式: 对于PX转em的方法也类似,就是em=16乘以px,也就是说1.5em=1.5×16=24px
二、理解了上面的概念,我们再来具体看看怎么优化网页打印样式:
首先,我们可以准备2套样式,一套正常的css网页展示的样式,另一套专门给打印的时候用的CSS样式,只要用户打印,就会通过媒体查询自动用打印的专门样式。这样,既可以在浏览器很好展示效果,也不影响具体打印出来的效果。
//正常浏览器用的样式
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
//专门打印用的样式
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
其中media指定的属性就是设备,显示器上就是screen,打印机则是print,电视是tv,投影仪是projection。
通过为styles.css指定screen,就能确保styles.css包含的样式只会对电脑屏幕使用,同样的,把media属性设为print就能确保print.css包含的样式只在使用者打印页面时使用.
专门打印样式中的一些优化:
(1)用点数指定大小
在打印样式表里,用点数制定字体大小是件十分合理的事情.在这份打印样式表中,首先就为<body>标签定义基础字体大小 -- 使用"点"单位.
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
比起用像素单位来说,这个应该更能想象12点字体会印多大,同时我们也选用serif字体,这种字体打印出来比较细致,而且比较容易阅读.
(2)用毫米(mm)写宽高
这时候,我们写类似width,height,margin的时候就不能用PX了,要用mm,(因此必须要设计师设计一份以photoshop中以点为单位的效果图,然后切图的时候就是有多宽就对应HTML中多少毫米)
(3)隐藏不必要的标签节省墨水
#nav, #sidebar, #advertising, #search {
display: none;
}
通过在打印样式表里设定display:none;我们就能使打印结果隐藏掉这些元素.
(4)去掉背景图片和颜色
body { background: none; }
这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.这样做节省墨水,且让打印结果更好阅读
三、打印样式表注意事项:
1、打印样式表中最好不要用背景图片,因为打印机不能打印CSS中的背景。如要显示图片,请使用html插入到页面中。
2、最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物,所以建议使用pt和cm。
3、隐藏掉不必要的内容。(@print div{display:none;})
4、打印样式表中最好少用浮动属性,因为它们会消失。
7、如果想要知道打印样式表的效果如何,直接在浏览器上选择打印预览就可以了。
欢迎加入大前端交流群!群号:277942610,VIP新群
网页打印样式CSS的更多相关文章
- web的各种前端打印方法之CSS控制网页打印样式
来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...
- css设置网页打印样式
有三种方法 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="css/n ...
- CSS控制print打印样式
来源:http://blog.csdn.net/pangni/article/details/6224533 一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显 ...
- 如何用css写打印样式
打印样式 打印样式就是针对网页被打印时设置给文档的样式,由于打印时是显示在纸上,跟屏幕还是有区别的,对于有打印需求的网页往往需要设置专门的打印样式来适配页面. @media print 声明自己是打印 ...
- jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- JQuery巧妙利用CSS操作打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- html / css打印样式
最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
- 从零开始学习html(六)开始学习CSS,为网页添加样式
一.认识CSS样式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
随机推荐
- Centos7在单用户模式下重置root密码
1.启动Centos7 ,按空格让其停留在如下界面: 鼠标上下可以选择启动内核,默认选择第一个内核开机 2.按e键进入编辑模式 e 按下e键后我们可能无法看到我们需要编辑的区域,这是因为在较新版本的C ...
- 01.JDBC操作数据库-快速入门操作
/** * 简单入门操作 * 注:先将mysql-connector-java-5.1.36.jar 构建 Build Path环境当中去 * @param args * @throws Except ...
- Activiti图表bpmn对应的xml文件
当我们绘制了一个bpmn图表,实质是创建了一个xml文件, 右键bpmn文件open with xml edit <?xml version="1.0" encodin ...
- kettle大数据量读写mysql性能优化
修改kettleDB连接设置 1. 增加批量写的速度:useServerPrepStmts=false rewriteBatchedStatements=true useCompressio ...
- python3之time、datetime、random
UTC:协调世界时,又称世界统一时间.世界标准时间.国际协调时间.由于英文(CUT)和法文(TUC)的缩写不同,作为妥协,简称UTC. 中国属于东八区,领先世界时间8小时 time模块 time.ti ...
- bresenhan算法数学推导
//原帖http://www.doc88.com/p-612602414790.html
- Dubbo源码阅读顺序
转载: https://blog.csdn.net/heroqiang/article/details/85340958 Dubbo源码解析之配置解析篇,主要内容是<dubbo:service/ ...
- Hash和HashCode深入理解
目录介绍1.Hash的作用介绍1.1 Hash的定义1.2 Hash函数特性1.3 Hash的使用场景2.如何判断两个对象相等2.1 判断两个字符串2.2 判断两个int数值2.3 其他基本类型3.H ...
- kubernets网络模式
参考:https://www.kubernetes.org.cn/2059.html
- [python]Generators
generators(生成器)是python提供的一种机制,可以让函数一边循环一边计算,通常函数是一遍执行,而生成器可以在执行中间交出变量,下次调用时从交出变量的地方重新开始,这种机制通过yield关 ...