维基百科中的定义:像素,为视频显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“画像元素”之意。它不是一个确定的物理量,也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。
对于一个像素可以认为是由显示器的一个个“点”来显示的,比如我们电脑屏幕就是由很多很多的像素点构成。因此衡量电脑屏幕分辨率有一个很重要的物理参数DPI(dots per inch,每英寸点数),显然单位面积中像素的点数越多,DPI的值也就越大,屏幕展现的细节就越多,画质相对也就越清晰。
在计算机领域,分辨率一般用PPI(pixels per inch),表示每英寸最多可以 呈现的像素个数,但是PPI是可以缩写为DPI的,两者表示都没问题 。相反在印刷领域,会经常看到DPI这个参数,比较早的喷墨式印刷机喷的都是一个个点。
以我电脑为例,用勾股定理求出斜边2203px,然后除以设备斜对角线15.6,最后得出 PPI=141,表示在我电脑上一英寸的直线上可以呈现141个像素点,一英寸的矩形区域,可以呈现141*141=19881个像素点。
同理可以计算出苹果电脑(1440x 900) PPI=127 ,(2560 x 1600) PPI=227
(补充:屏幕的PPI用的是物理分辨率不是逻辑分辨率,所以需要我们先查出屏幕的物理分辨率,那什么是物理分辨率?什么是逻辑分辨率?)
先明确一个很重要的概念,分辨率有两种,逻辑分辨率和物理分辨率!!!
逻辑分辨率:电脑中系统可以调节的分辨率,这和电脑系统有关,系统可以控制的分辨率称之为 逻辑分辨率 。
物理分辨率:屏幕出厂就决定了物理分辨率,不管怎么调节你电脑屏幕最原始的分辨率是永远不会变的(除非换显示屏),这是硬件技术,屏幕最原始的分辨率称之为 物理分辨率 。
(补充:我们平时所说屏幕分辨率,其实是指系统设置的逻辑分辨率。当逻辑分辨率和物理分辨率匹配一致时效果最好。Windows中,电脑系统推荐的逻辑分辨率和物理分辨率是相等的。同时可以看到系统提供了很多分辨率,系统提供最高的逻辑分辨率通常就是设备物理分辨率。知道物理分辨率和屏幕尺寸,就可以开开心心的算屏幕PPI了)
但是如果有人问你物理分辨率和逻辑分辨率是什么,肯定不能回答,物理分辨率就是屏幕那个,逻辑分辨率就是操作系统那个,所以我们需要继续打破砂锅问到低。
物理分辨率: 简单的理解物理分辨率就是一块屏幕每英寸最多能呈现的像素点数。物理分辨率和屏幕尺寸没有关系 ,比如我电脑是15.6寸,分辨率是1920*1080的,但是我手机只有5.99寸,分辨率也是1920*1080。它不是一个视觉单位,简单理解是一个个的物理像素点,也不能理解为长度单位。只能用来描述点的个数,不能描述长度。
刚才计算了我电脑的PPI=141(每英寸最多可以呈现141个像素点),现在假设在我电脑屏幕上切下一块一英寸的正方形,那么这块正方形小屏幕最多能呈现141*141=19881个像素点,这是没有任何问题的。假如有另一块一英寸的屏幕,这块屏幕的做工更加精细,使用的技术牛笔,PPI竟然达到了227,那么这个一英寸的屏幕最多能呈现的像素点数就是:227*227=51529个。所以同样大小的两块屏幕,PPI越大,能呈现的像素点就越多,物理分辨率也就越大。所以说PPI是衡量一块屏幕显示效果的一个重要参数。
而逻辑分辨率和物理尺寸有关,简单理解就是一个长度单位,如果往深层次的说,这和栅格渲染有关系。 逻辑分辨率和物理分辨率有一种对应关系,后面移动设备分辨问题我会解释。现在继续先来简单理解一下,还是用我电脑举栗子。
我电脑分辨率1920*1080(现在我电脑物理分辨率和逻辑分辨率相等),现在知道PPI=141,能求出我电脑是多少英寸的吗?底下一片人都在说废话,你刚才就是用你电脑分辨率和15.6求的PPI=141。如果现在我们有一张1920*1080的壁纸,那么用PS工具什么的,都可以量出144px的长度就是一英寸。但是这并不能代表1920*1080逻辑分辨率对应的就是15.6英寸的设备,现在如果在另个设备PPI=375,同理可以求出设备是5.8英寸的,差不多和手机一样大,这时我们需要量出375px,才是一英寸的长度。 逻辑分辨率可以表示长度,但是它和设备的PPI有很大的关系。
如果你觉得还是不能理解,可以继续看下面的例子:
现在有一张141*141分辨率的图片,那么在我电脑上这张图片显示的大小就是一英寸的矩形,因为我电脑每英寸可以呈现141个像素点,反过来说141个像素点在我电脑上就表现一英寸的大小。现在将这图片放在另一台电脑上,电脑屏幕尺寸和我电脑相同,但是PPI=70。那么图片在屏幕显示长度是几英尺?2英寸!(如果答对了,你就可以放过下面这个例子,不用看了)
如下图A屏和B屏,假设都是一英寸大小,A屏每英寸可以显示两个像素点,B屏可以显示四个像素点。现在有一张4*4像素的图片,在B屏刚好完美呈现,但是在A屏想完整显示,A屏向右需要再加两个两素点,向下再加两个像素点。所以在A屏上需要两英寸。
总结:逻辑分辨率这块可能是有点不好理解,很抽象,如果纠结很久还是不清楚,也不用纠结了,下面实战篇会给出具体的例子。
单从硬件上面看,苹果电脑屏幕物理分辨率就已经比普通电脑物理分辨率高出很多。当然你肯定要说为什么要拿苹果最好的设备去比较。我朋友用的是macbook air ,13.3,1440*900,但是画面呈现效果依然比普通电脑好很多。屏幕是一个因素,但是不是绝对的,屏幕的画面显示效果还和操作系统、显卡很多因素有关。苹果系统的图形渲染技术就是全世界最好的,所以苹果屏幕所呈现的画质自然要比普通屏幕看起来更细腻更舒服。
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、像素密度的危机
每月更新两篇,质量保证!
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
padding:10px 四个内边距都是10px
padding:5px 10px 上下5px 左右10px
padding:0px 10px 15px上0px 右10px 下15px 左因为缺省与右相等,则为10px
padding:5px 10px 15px 20px上5px 右10px 下15px 左20px
padding的顺序是顺时针方向的