图文尺寸的若干

本文主要汇总了关于屏幕、印刷品中尺寸的概念,包括尺寸单位的定义、换算。 成文日期:2017年6月29日 修改日期:2017年7月2日

相关尺寸

A4页面尺寸:高297×宽210mm(96ppi→1122×793px)
公文版心尺寸:高225×宽156mm(96ppi→850×589px)
PPT宽屏页面尺寸:高19.05×宽33.87cm(16×9, 96ppi→1280×720px)
PPT宽屏正文尺寸:高13.00×宽28.85cm(4×3, 96ppi→960×720px)
微信封面图上传推荐尺寸:900×500px
微信封面图浏览时尺寸:640×356px

WINDOWS系统默认为96DPI(每英寸96个像素)

公文内附图占一页宽宽155mm(585px),高度要小于225mm(850px)。
公文内附图占半页宽宽75mm(280px),高度要小于225mm(850px)。
PPT宽屏正文尺寸高13.00cm(490px)×宽28.85cm(1090px)

一、显示屏、印刷品的尺寸的计量单位

尺寸的单位可以分为物理尺寸和逻辑尺寸。

物理尺寸是计量文字、图形在物理实体屏幕、印刷品上显示的尺寸。
物理尺寸是唯一的,在不同屏幕、印刷品上表示的含义是一致的。
物理尺寸是用于计量文字、图形本身的尺寸。

逻辑尺寸是计量文字、图形在不同尺寸的屏幕、印刷品显示的尺寸。
逻辑尺寸在不同屏幕、印刷品上表示的表达的物理尺寸是不一致的。
逻辑尺寸是用于兼容在不同屏幕、印刷品上显示时的过度尺寸。

物理尺寸

包括像素、英寸、厘米、磅。

1.px 像素 Pixels - corresponds to actual pixels on the screen. 2.in 英寸 Inches - based on the physical size of the screen. 1 Inch = 2.54 centimeters 3.cm 厘米 Centimeters - based on the physical size of the screen. 4.pt 点、磅 Points - 1/72 of an inch based on the physical size of the screen. 1pt = 1/72 inch

对于文字、图片文件来说,像素px是物理尺寸的单位,和显示在屏幕的像素px、打印在印刷品的英寸in、厘米cm、磅pt没有直接关系。
举个例子,一张图片的尺寸是900×500px,不管你在屏幕上显示多大(这就涉及到DP的概念)、打印在印刷品上多大(这就涉及到DPI、PPI的概念),它的实际尺寸都是900×500px。

对于屏幕来说,像素px才是物理尺寸的单位,和文字、图片的像素px单位没有直接关系。

对于印刷品来说,英寸in、厘米cm、磅pt才是物理尺寸单位,和文字、图片文件的像素px、屏幕的像素px无关。

物理单位相互独立,在文件尺寸、屏幕尺寸、印刷品尺寸间相互转换需要一个逻辑单位来过度。

点的概念(point和dot)

在排版印刷中,点是最小的计量单位。但是“点”的尺寸在历史上经历了各种变化,并且有很多不同标准。数字印刷的发展建立了DTP标准(Desktop Publishing Point),并成了事实标准。DTP定义每1/72英寸(0.353mm)一个点。
DTP标准是Adobe公司于开发Adobe PostScript时建立,Apple也采用了该标准作为苹果电脑显示分辨率和激光打印机的打印分辨率。
1996年,DTP标准被W3C采纳并用于CSS(Cascading Stylesheets),并在4:3固定像素比例的显示器上,定义了96px/inch的标准。

[JIS, CSS (q), DIN]=250µm≈0.009 843inch=5/508inch [TeX (pt)]= 351.459 80µm≈ 0.013 837inch=  100⁄7227inch [PS, CSS (pt), TeX (bp)]= 352.7µm= 0.013 8inch=  1⁄72inch [Tex (nd)]= 375µm≈ 0.014 764inch=  15⁄1016inch [TeX (dd)]≈ 376.065µm≈ 0.014 806inch [Mozilla (dt)]= 376.296µm= 0.014 8inch=  2⁄135inch

逻辑尺寸

包括PPI、DPI、DP、SP。

1.PPI 每英寸的点数 dot per inch 2.DPI 每英寸的像素数 pixel per inch 用于印刷品时,表示印刷品点密度。 用于显示屏时,DPI=PPI 3.dp or dip 设备独立像素,屏幕实际像素密度的抽象单位。 4.sp 比例独立像素,与dp类似,但是会同时缩放字号尺寸。

电子图片、文字的尺寸与显示屏的尺寸的转换(DP、SP)

DP是用来描述显示屏像素密度的单位。
由于安卓设备的显示屏大小和分辨率种类很多,如果UI设计使用像素作为图片和文字的尺寸,就会造成显示效果在不同设备上不一致。
例如,指定一个按钮尺寸为32×32px,那么在1280×720px和1920×1080px的显示屏上显示的大小是不一致的,以此类推,会给UI排版设计带来灾难后果。
为了保持UI设计在不同设备上显示效果的一致性,Google引入了DP和SP的概念。DP用于图片的尺寸,而SP主要用于文本的尺寸。

首先,Google将安卓设备显示屏分辨率分为ldpi(120 dpi)、mdpi(160 dpi)、hdpi(240 dpi)、xhdpi(320 dpi)等若干个级别,并使用mdpi中的160DPI作为基准来定义dp单位。据Google解释,使用mdpi作为基准是基于Google的第一款设备HTC G1(虽然是180DPI的设备,但是属于mdpi这个范围内),而不适用180DPI而使用160DPI是因为160DPI更方便在不同DPI的设备间适配(便于不同分辨率之间整除,120、160、240、320之间是0.75 : 1 : 1.5 : 2的比例关系)。
Google对DP的定义是,160DPI设备上,1dp的大小为1px。
例如一个320DPI的设备上,1dp=2px。
不同DPI设备之间,px和dp的转换关系为:px = dp × (dpi / 160)

而在微软的体系中(例如Windows系统,WPF等等),对dp的定义不一样,不过在微软这边,不叫DP,而是以DPI来称呼。

微软对DPI(DP)的定义是,1DPI=1/96inch。
96dpi是早先很大一批LCD显示器的分辨率标准值,因此,很有可能,当一张图片没有被指定具体的ppi时,某些图像数据解析器会自动将这个图像的分辨率解析为96dpi。
PS. 在PC的Microsoft Office 2013中,图片、幻灯片默认DPI为96。
例如,宽屏的幻灯片尺寸为:33.87×19.05cm,对应的文档分辨率为1280×720px。(33.87cm×2.54/96DPI=1280px)
在MS Office中,1英寸(inch) = 2.54厘米(cm)=72点(磅,points,pt)=96像素(px)。
EXCEL表格中,行高的默认单位是“磅”,即点(point,pt),1行高默认单位=1.33像素=0.352毫米=1磅。(4px = 3pt,因此行高设置为3pt的倍数才能得到整数的像素值)
列宽的默认单位是“字符宽度”(由于不同字符的宽度不一致,该字符宽度是0到9的平均宽度),例如5个字符宽度,可以容纳5个字母“A”。
当新建EXCEL文件的默认字号设置为12号时,1列宽默认单位=8.5像素=2.25毫米=6.4磅。

电子图片、文字的尺寸印刷品的尺寸的转换(PPI)

我们在PS中常见的72PPI,就是将实际图片、文字像素px尺寸和印刷品转换的一个逻辑单位。
实际中常用的转换的逻辑单位有DPI、PPI。这两个单位经常混淆(这事感觉微软脱不了干系,谁叫你把WINDOWS设置里面的显示大小尺寸调整用DPI这个描述了,规范吗?合适吗?……不过,个人理解:在现在信息化设备普及的环境下,大家使用这两个单位时,实际含义也的确没有太大的区别了)。
DPI和PPI是这么区分的:
DPI,主要用于描述打印设备的打印精度,每英寸需要由多少个点来绘制(例如喷墨打印机,300DPI意味着画一英寸长的线需要喷300个墨滴)。
PPI,主要用来描述印刷品的扫描精度,每英寸的内容需要多少个像素点来描述(例如扫描仪,300PPI意味着1根1英寸长的线,最终被扫描成300个像素点)。

需要注意的是,分辨率就是分辨率,是你图片本身的一个参数;而DPI是你图片从电子文件到印刷品过程中的一个转换单位,和图片本身没有实质关系。
对于像素px大小确定的图片,不管你如何调整DPI或者PPI,都不会改变图片的精细程度,会发生变化的只是你打印出来的印刷品的尺寸大小。
例如1024 × 768大小的图片,你把DPI提高1倍,图片的分辨率还是1024 × 768,但是打印到印刷品上的大小就小了1倍。

而肉眼分辨的精细度是有上限的,一般认为超过300DPI的精细度,肉眼看上去就没啥区别了。

em和rem

一个em是一个排版区域单位,1个em等于指定点(point)尺寸。例如,当字体为16点(points)时,1em=16points。
在CSS当中,em单位用于点(point)和英尺(inch)的名义尺寸单位。实际尺寸取决于DPI设置、当前元素的字体大小和字体类型。
rem (root em)和默认字体大小对应,代表文档的默认字体大小,在整个文档中保持不变。


二、尺寸的图表说明

Unit Description Units Per Physical Inch Density Independent Same Physical Size On Every Screen
px Pixels Varies No No
in Inches 1 Yes Yes
mm Millimeters 25.4 Yes Yes
pt Points 72 Yes Yes
dp Density Independent Pixels ~160 Yes No
sp Scale Independent Pixels ~160 Yes No

附:微信封面图的大小尺寸

微信单图文的封面图推荐的分辨率为900×500px,多图文的非首条文章的封面图推荐的分辨率为200×200px。
经过试验,上传900×500px的封面图,在微信电脑客户端浏览文章时,分辨率为640×356。在微信电脑客户端点击文章内的封面图时,分辨率为900×500。在浏览器内浏览文章时,分辨率为640×356

使用PowerPoint做微信封面图,当然需要先修改幻灯片大小。
按照96DPI的标准,封面图900×500px的图片对应幻灯片的大小为:23.813×13.229cm
(900/96×2.54=23.813cm,500/96×2.54=13.229cm)

在电脑端浏览文章,文章的宽度就是640。

知乎上,有人上传900×500px的图片作为封面图,发现在发布信息的大图模式下,左右被部分裁减掉;多文章列表模式下,上下左右均被部分裁减掉。
有人建议,公众号的封面图最好的尺寸是600×275px

不过我的想法是:
封面图片的分辨率还是简单的定在900×500px,只要主要内容不落在图片边缘就行了。
当然,对于正文内的图片,直接定在640px宽就行了。


附:PPT幻灯片尺寸

宽屏幻灯片(高19.05×宽33.87cm)默认正文排版

页面边距(margin):上1.01cm,下1.89cm(未考虑页码等页脚因素),左右均为2.33cm。如果考虑页脚因素,上下左右边距比例均在5%左右。
标题、正文间间距(margin):0.38cm,占页高2%左右。
元素内文本间距(padding):上下0.13cm,左右0.25cm。

默认标题行尺寸:高3.68cm,宽29.21cm 默认正文尺寸:高12.09cm,宽29.21cm

在目前(2017.7.13)使用的财务通报PPT模板中,标题行较窄,正文尺寸可以达到高15.71cm,宽31.56cm。

因此,幻灯片标题部分尺寸应为高13%,宽85%;正文部分尺寸应为高70%,宽85%。

幻灯片高度比例尺

项目 比例 在宽屏下的尺寸
页面上边距 5% 1.0cm
标题高度 13% 2.5cm
标题、正文间距 2% 0.5cm
正文高度 70% 13.0cm
页面下边距 2% 2.05cm
合计 100% 19.05cm

幻灯片宽度比例尺

项目 比例 在宽屏下的尺寸
页面左边距 7.5% 2.51cm
内容宽度 85% 28.85cm
页面右边距 7.5% 2.51cm
合计 100% 33.87cm

PPT2013幻灯片大小

名称 别名 项目 MEMO 宽高比
全屏显示(4:3) 标准 厘米cm 25.40 19.05 16/12
英寸inch 10.00 7.50
像素(96DPI) 960 720 文档分辨率
像素(150DPI) 1500 1125
像素(200DPI) 2000 1500
宽屏 宽屏 厘米cm 33.87 19.05 16/9
英寸inch 13.33 7.50
像素(96DPI) 1280 720 文档分辨率
像素(150DPI) 2000 1125
像素(200DPI) 2667 1500
全屏显示(16:9) 厘米cm 25.40 14.29 16/9
英寸inch 10.00 5.63
像素(96DPI) 960 540 文档分辨率
像素(150DPI) 1500 844
像素(200DPI) 2000 1125
全屏显示(16:10) 厘米cm 25.40 15.88 16/10
英寸inch 10.00 6.25
像素(96DPI) 960 600 文档分辨率
像素(150DPI) 1500 938
像素(200DPI) 2000 1250
A4(210×297MM) 厘米cm 27.52 19.05 16/11
英寸inch 10.83 7.50
像素(96DPI) 1040 720 文档分辨率
像素(150DPI) 1625 1125
像素(200DPI) 2167 1500

参考文件

  1. 如何排版微信公众平台的文章?
  2. 微信公众号编辑有哪些实用的小工具和小技巧? - 回答作者: 塘主
  3. 微信公众平台图文消息封面大图片建议尺寸:360像素 * 200像素,这个值根据什么得出的? - 回答作者: 王如飞
  4. Device-independent pixel - Wikipedia
  5. WPF Text Measurement Units – WPF Text Blog
  6. What is the difference between “px”, “dip”, “dp” and “sp” on Android? - Stack Overflow
  7. DPI 和 PPI 的区别是什么? - 知乎
  8. DPI、PPI、DP、PX 的详细计算方法及算法来源是什么? - 知乎
  9. 一张300dpi的照片,通过photoshop的图像大小设置成900dpi,可不可以说照片清晰度提高了呢? - 知乎
  10. dp 这个单位是安卓发明的么?为什么 px=dp*(dpi/160)? - 知乎
  11. 同一个张图片,480 × 800 像素,文件属性水平垂直分辨率为 96 DPI,在 Photoshop 中看的分辨率为 72,为什么看的分辨率不一样,两者有什么关系? - 知乎