前言：像素是一个很基础的知识，生活中我们看的电视、用的电脑、玩的手机处处都是像素，尤其从事前端相关开发人员，经常要和像素打交道，但是如果有人问你什么是像素，你知道吗？
一、你将学到
- 什么是像素
- 逻辑分辨率和物理分辨率
- 苹果显示屏画面为什么比普通显示屏看着更舒服
- 常见的240p、360p、720p、1080p什么意思
- 移动设备分辨率问题
二、什么是像素
维基百科中的定义：像素，为视频显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“画像元素”之意。它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。
对于一个像素可以认为是由显示器的一个个“点”来显示的，比如我们电脑屏幕就是由很多很多的像素点构成。因此衡量电脑屏幕分辨率有一个很重要的物理参数DPI（dots per inch，每英寸点数），很显然单位面积中像素的点数越多，DPI的值也就越大，屏幕展现的细节就越多，画面也就越清晰。
那为啥我看到的分辨率都是用PPI表示的？
在计算机领域，分辨率一般用PPI（pixels per inch），表示每英寸最多可以 呈现的像素个数，但是PPI是可以缩写为DPI的，两者表示都没问题 。相反在印刷领域，会经常看到DPI这个参数，比较早的喷墨式印刷机喷的都是一个个点。
怎样求设备的PPI？
- 我用的笔记本是ThinkPad E550，15.6寸，屏幕分辨是1920 x 1080（电脑、手机中的寸是指屏幕斜对角线长度。顺便查了一些ThinkPad和惠普两种高价笔记本，分辨率相同，没发现更高的分辨率，不考虑外接设备）
- MacBook pro，13.3寸，屏幕分辨率是 2560 x 1600（查了苹果的笔记本，大部分都是1440*900和2560*1600，当然还有更高的分辨率）
模拟我电脑
以我电脑为例，用勾股定理求出斜边2203px，然后除以设备斜对角线15.6，最后得出 PPI=141，表示在我电脑上一英寸的直线上可以呈现141个像素点，一英寸的矩形区域，可以呈现141*141=19881个像素点。
同理可以计算出苹果电脑（1440x 900） PPI=127 ，（2560 x 1600） PPI=227
（补充：屏幕的PPI用的是物理分辨率不是逻辑分辨率，所以需要我们先查出屏幕的物理分辨率，那什么是物理分辨率？什么是逻辑分辨率？）
逻辑分辨率和物理分辨率（重要，难点）
先明确一个很重要的概念，分辨率有两种，逻辑分辨率和物理分辨率！！！
逻辑分辨率：电脑中系统可以调节的分辨率，这和电脑系统有关，系统可以控制的分辨率称之为逻辑分辨率。
物理分辨率：屏幕出厂就决定了物理分辨率，不管怎么调节你电脑屏幕最原始的分辨率是永远不会变的（除非换显示屏），这是硬件技术，屏幕最原始的分辨率称之为物理分辨率。
（补充：我们平时所说屏幕分辨率，其实是指系统设置的逻辑分辨率。当逻辑分辨率和物理分辨率匹配一致时效果最好。Windows中，电脑系统推荐的逻辑分辨率和物理分辨率是相等的。同时可以看到系统提供了很多分辨率，系统提供最高的逻辑分辨率通常就是设备物理分辨率。知道物理分辨率和屏幕尺寸，就可以开开心心的算屏幕PPI了）
Windows10
但是如果有人问你物理分辨率和逻辑分辨率是什么，肯定不能回答，物理分辨率就是屏幕那个，逻辑分辨率就是操作系统那个，所以我们需要继续打破砂锅问到低。
物理分辨率：简单的理解物理分辨率就是一块屏幕每英寸最多能呈现的像素点数。物理分辨率和屏幕尺寸没有关系，比如我电脑是15.6寸，分辨率是1920*1080的，但是我手机只有5.99寸，分辨率也是1920*1080。它不是一个视觉单位，简单理解是一个个的物理像素点，也不能理解为长度单位。只能用来描述点的个数，不能描述长度。
刚才计算了我电脑的PPI=141，现在在我电脑屏幕上切下一块一英寸的正方形，那么这块正方形小屏幕最多能呈现141*141=19881个像素点。假如有另一块一英寸的屏幕PPI=227，那么这个一英寸的屏幕最多能呈现：227*227=51529个像素点，同样大小的两块屏幕，很显然像素点多的，分辨率高。所以PPI是衡量一块屏幕显示效果的一个重要参数。
而逻辑分辨率和物理尺寸有关，简单理解就是一个长度单位，如果往深层次的说，这和栅格渲染有关系。逻辑分辨率和物理分辨率又有一种对应关系，后面移动设备分辨问题我会解释。现在继续先来简单理解一下，还是用我电脑举栗子。
我电脑分辨率1920*1080（现在我电脑物理分辨率和逻辑分辨率相等），现在知道PPI=141，能求出我电脑是多少英寸的吗？底下一片人都在说废话，你刚才就是用你电脑分辨率和15.6求的PPI=141。很显然这并不能代表1920*1080逻辑分辨率对应的就是15.6英寸的设备，现在如果在另个设备PPI=375，则可以求出设备是5.8英寸的，这设备和我手机差不多。所以说逻辑分辨率可以表示长度，但是它和PPI有很大的关系。
再举个例子
现在有一张141*141分辨率的图片，那么在我电脑上这张图片显示的大小就是一英寸的矩形，因为我电脑每英寸可以呈现141个像素点，反过来说141个像素点在我电脑上就表现一英寸的大小。现在将这图片放在另一台电脑上，电脑屏幕尺寸和我电脑相同，但是PPI=70。那么屏幕显示长度是几英尺？2英寸！（如果答对了，后面这个例子可以不看了）
如下图A屏和B屏，假设都是一英寸大小，A屏每英寸可以显示两个像素点，B屏可以显示四个像素点。现在有一张4*4像素的图片，在B屏刚好完美呈现，但是在A屏想完整显示，A屏向右需要再加两个两素点，向下再加两个像素点。所以在A屏上需要两英寸。
苹果笔记本电脑画面为什么比普通笔记本电脑看着更舒服？
单从硬件上面看，苹果电脑屏幕物理分辨率就已经比普通电脑物理分辨率高出很多。当然你肯定要说为什么要拿苹果最好的设备去比较。我朋友用的是macbook air ，13.3,1440*900，但是画面呈现效果依然比普通电脑好很多。屏幕是一个因素，但是不是绝对的，屏幕的画面显示效果还和操作系统、显卡很多因素有关。苹果系统的图形渲染技术就是全世界最好的，所以苹果屏幕所呈现的画质自然要比普通屏幕看起来更细腻更舒服。
常见的240p、360p、720p、1080p什么意思?
144p (192×144，20帧/秒)，4：3，录制一分钟大约1MB；
240p (320×240，20帧/秒)，4：3，录制一分钟大约3MB；
360p (480×360，20帧/秒) ，4：3，录制一分钟大约7MB；
480p (640×480，20帧/秒)，4：3，录制一分钟大约12MB；高清
720p (1280×720，30帧/秒) ， 16:9，录制一分钟大约35MB；超清
1080p (1920×1080，30帧/秒) ，16:9 ， 录制一分钟大约80MB。蓝光
除此之外还有更高的分辨率：
2K （1152 × 2048）
4K（2304 × 4096）
三、移动设备分辨率问题
像素你真的会吗？（px、dp、pt、rpx、rem）-移动设备分辨率问题（下一篇）
参考资料：
1、像素维基百科
2、A pixel is not a pixel is not a pixel
3、前端工程师需要明白的「像素」
4、Syntax and basic data types
5、像素密度的危机
每月更新两篇，质量保证，点击关注！
点喜欢的运气会一直一直很好！！！
网友评论