网页设计中“像素”和“点”的区别

产品开发的分工是一件挑战团队合作技巧的事情，以网页开发来说，由于网页的特性，单纯的网页视觉设计师很少能够直接掌握产品最终的外观，往往是在绘 图软件里面将视觉部分定稿，再由前端工程师根据设计来将产品的视觉部分实现出来。举凡图片的尺寸、位置，组件的效果、色彩的 RGB 值、文字的尺寸等等，都必须清楚的传达才能够完整的重现原本的设计。先前我们曾经介绍过一些方便网页制作时的沟通技巧跟工具，有兴趣的读者可以参考【学会为设计稿做好标注（附工具推荐）】。

而在开发 APP 的时候，这些问题一样存在。在大部分的时候，我们都使用像素来做绘制以及开发 App 的单位，这没什么问题，尤其是 iOS 系统目前的屏幕尺寸还算单纯，使用像素作为沟通的单位基本上不会有什么太大的误会产生。需要的时候顶多是视觉设计师准备一台手持装置，透过 xScope、Screenshots 之类的工具实时在手机上检视设计稿，增加工作的效率。

但是文字的尺寸则会出现问题，实际上遇到的状况就是设计师提供的字体尺寸不对，开发人员如果按照设计师的数值，则制作出来的文字会比设计稿来得变小：

有经验的开发人员通常就直接把设计师给的数值直接乘以 2 使用，藉以得到原本设计的结果，但这其中当然是有些误会在其中。在这里我们发现设计师标示文字尺寸时是使用了 pt 这个单位，很容易让人把它跟像素搞混在一起，但它们却是完全不同的东西。

pt 是常见的标示文字尺寸的单位，在绘图以及文书软件等几乎都是使用 pt 作为字体尺寸的单位，故一般称呼「字级」时，通常即是指 pt，许多平面排版设计师都喜欢在手边准备一张字级对照表，方便与客户沟通时使用。

px 与 pt 的区别

px ( pixel、又称为像素) 与 pt ( point、有时被称为点) 是两个看起来很像、却完全不一样的单位 (在某些场合他们是1：1的)，在很多时候却常常被搞混，或是制作过程根本没有分清楚、导致结果没有很精确。在绘图软件里面可以看到基本单位设定里面就有 这两个选择：

px ，即是 pixel、像素 。是屏幕上所显示的最小单位，当制作的版面是供屏幕浏览时，使用 px 可以精确的控制画面上显示效果。但也因为每个屏幕分辨率不同，像素的大小也不固定。在分辨率高的屏幕上，一个像素可能会小到肉眼无法辨识的大小。

pt，即是 point，是一个标准的长度单位。定义上 1pt＝1/72 英吋。因此它跟我们所熟悉的公分、公尺一样，可以明确的指出1pt 的长度是多少。

也因此，像 word 这种以打印输出为需求的软件，字体大小使用 pt 就显得相当方便实用，只要软件设定是对的，使用多少 pt 的字级，透过打印后永远都会得到一样大小的字体。

但是在屏幕显示的时候，则需要透过一定的转换公式，但这边会遇到的另外一个问题就是各家操作系统的 dpi 并不一致。Windows 系统一般都是设定 96dpi，Mac 的OSX系统则大多是 72dpi。由于 pt 在定义上是 1/72 英吋的关系，因此在 72dpi 的系统上时 1pt= 1px，这没什么问题，但在 96dpi 时则明显不适用，像素密度明显变细了，所以需要一个转换的公式，在这边，1px ＝ 0.75pt。（ 72 / 96 = 0.75 )

也因为这样，在许多时候都建议屏幕显示用的设计可以选择 px 作为字体的单位，例如网页的css 样式表单就有 pt、px 以及百分比的 em 等方式来定义字体大小可供设计师选择。

开发 iOS app 的时候，虽然没有这么多样的单位可选，但设计师只需要简单的利用一些小技巧即可让文字尺寸与最后的结果相符：由于 Photoshop 使用 1 inch = 72 pt 的标准，因此当文件档案的分辨率设定为 72 的时候（这是默认值），1 pt = 1 px ，而设定为 144 的时候 1 pt = 2 px 。

所以，在以 Retina APP 为主流的现在，开新文件时请记得将档案的分辨率设定为 144，如此就能保证你的 pt 数值是开发人员需要的数值了。

pt 与 px 理解起来其实不难，在应用的时候其实也相当单纯，在大部分的情况下适用的一个理论是：当设计的目的是用于供屏幕浏览, 则趋向于使用 px 以方便掌握细节；而如果是为了做输出打印的需求, 使用 pt 则是较好的选择。

文章名称：网页设计中“像素”和“点”的区别
文章分享：/news13/218963.html

成都网站建设公司_创新互联，为您提供动态网站、云服务器、小程序开发、ChatGPT、域名注册、品牌网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联