文档章节

全解析】屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

deepler
 deepler
发布于 2017/04/10 16:51
字数 2441
阅读 11
收藏 1
点赞 0
评论 0

全解析】屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

【全解析】屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。

咱们从手机开始说起吧。先上一张图,给大家看看关于手机屏幕方面的一些参数。红框内的三个参数,大家一定都不陌生,我也不陌生。不过讲真的,就在不久前,我连手机的屏幕尺寸到底是怎么算出来的都不知道。下面我们开始慢慢讲。

【全解析】屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

屏幕(主屏)尺寸是什么,怎么算?

下面这张图是华为荣耀7的尺寸图,图上写的是5.2英寸。那么这个5.2英寸到底是怎么算出来的呢?在说这个问题之前,我们先进行一下单位的换算。我们平时是不用英寸这个单位的,我们用的是毫米,厘米,米这些单位。那么英寸和毫米,厘米之间怎样的换算关系呢?我也不知道,所以我百度了一下。

1英寸(inch)=2.54厘米(cm)

原来一英寸相当于我们的2.54厘米这么长。现在让我们回到5.2英寸到底是怎么算出来的这个问题。一开始呢,我觉得可能是手机屏幕的面积有这么大吧,后来我百度了英寸之后,才发现自己有多愚蠢。因为英寸是长度单位,面积的表示要用面积单位,英寸显然不可以表示面积。从这一点,就否认了我的想法。

其实,我们所说的这个5.2英寸是手机屏幕对角线的长度。

【全解析】屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

我这么一说,有点数学常识的人就知道手机的屏幕尺寸是怎么算的了吧。没错,就是那个勾股定理了,知道手机屏幕的长和宽,然后利用勾股定理,就可以算出斜边的长了。还有个更简单的方法,只要用尺子量一下它的对角线是多少厘米,然后再换算成英寸就搞定了。

屏幕(主屏)尺寸是什么,怎么算?

分辨率又是什么鬼?

上面的图显示,华为荣耀7的分辨率是1920PX*1080PX。那么,这个分辨率又是怎么回事呢?可能大家注意了,1920和1080后面都跟了PX的字样,这个PX就是我们很熟悉的像素了,这个像素咱们后面讲,现在你只要明白,像素是分辨率的单位就好了。

在讲解分辨率之前,我们要明白一个概念。在我们手机上呈现的一条线,一个面,一张图像都是由最小的单位像素来表示的,你也可以简单理解为是由一个个小方块组成的。看看下面这张图你就明白了。

屏幕(主屏)尺寸是什么,怎么算?

所以呢,分辨率1920px*1080px的意思就是,在这个华为荣耀7的5.2英寸屏幕上,在竖向的高度上有1920个像素块,在横向的宽度上有1080个像素块。

下面来讲讲啥是分辨率比?

你可能注意到了,手机的屏幕是个长方形,高是1920px,宽是1080px。你稍计算就会发现,这个高和宽的比例是16:9的。说到16:9这个比例,经常看视频的同学一定就不陌生了。手机屏幕有各种分辨率比,这个比你也可以看作是手机屏幕的尺寸比。根据百度百科显示,手机分辨率之所以表示成1920px*1080px这种形式,也是为了方便表示手机屏幕的大小。这里的大小,应该指的就是手机屏幕的尺寸吧。其实,告诉你一个手机的分辨率,你真的就能计算出手机屏幕的尺寸吗?那么,还差什么条件才能计算出手机屏幕的尺寸呢?

什么是屏幕像素密度?

屏幕像素密度,即每英寸屏幕所拥有的像素数,英文简称PPI。在读到这个每英寸屏幕时,我曾经深深的疑惑,这个每英寸是不是每平方英寸的简称呢?事实证明,我还是太年轻,这个英寸跟之前手机屏幕的尺寸一样,也是对角线的长度。所以,我们可以这么理解屏幕像素密度,即在一个对角线长度为1英寸的正方形内所拥有的像素数。说到这里,大家可能还是有些疑惑的,没事,接着看下面。

屏幕像素密度,分辨率,屏幕尺寸的关系是什么?

这三个专业名词之间,有着非常严谨的关系。为啥说严谨呢,因为这三者之间,有一个公式可以表示。

屏幕(主屏)尺寸是什么,怎么算?

这个公式真是简单明了,把很多疑问都给我们解决了。我们还是拿华为荣耀7手机为例,我们知道它的尺寸为5.2英寸,分辨率为1920px*1080px(1920px就是公式里的纵向,1080px就是公式里的横向了)。你不信的话就用公式算一下,最后得出的PPI,是不是就是424ppi。我算了一下,结果是423.6359942465958,懂得四舍五入的同学就知道424是个近似值了。

像素的大小是固定的吗?

我先这么说一句,像素是没有实际的物理尺寸的。为啥呢,按照惯例,举个例子。

屏幕(主屏)尺寸是什么,怎么算?

上面的这两张图,第一张是苹果6手机的屏幕参数,第二张还是出镜率最高的华为荣耀7的屏幕参数。大家注意看,这两个手机的分辨率都是1920px*1080px。但是,苹果手机的屏幕尺寸比华为荣耀7小了0.2英寸。又一个但是,苹果手机的屏幕像素密度(PPI)却比华为荣耀7高了45个PPI,也就是每英寸像素个数多了45个。这说明了啥?说明了同样的一英寸的长度,苹果手机用469个ppi来显示,华为只用了424个ppi来显示。你能告诉我哪个手机的显示效果更加精细吗?同样是一英寸,同样都是像素,为啥苹果手机一英寸有469个像素,华为只有424个呢?我们知道,英寸是长度单位,它有固定的物理尺寸。那么问题就只能出在了像素身上。这说明,像素这个东西,在苹果手机上变小了。所以,像素这个东西,就像金箍,能变大能变小。

电脑屏幕可以调分辨率,难道是通过调整它的像素大小实现的?

你错啦,要是这么简单,我写这篇文章有个卵用?其实类,在同一个设备上,它的像素个数是固定的,这是厂商在出厂时就设置好了的。只有不同的设备之间,才有像素大小的区别。既然在同一个设备上,像素点数早就设定好了,那电脑上可以调整分辨率是怎么回事?我再怎么调,像素点数还是那么多啊。

屏幕(主屏)尺寸是什么,怎么算?

 

人家系统给你推荐的是1366px*768px的分辨率,你知道意味着什么吗?没错,微软在这块屏幕上横向设置了768个像素,竖向设置了1366个像素。再怎么拉扯,这个数字是不会变了。那么,为啥我还能调整分辨率呢?我要是调整到800px*600px,按照定义,横向就是600个像素,竖向就是800个像素了啊。其实呢,你把分辨率调成800*600,系统就会分配给你800*600个有效像素个数,也就是真实的色彩块。其他的个数呢,就由系统自作主张,通过一系列运算给你一个模拟色彩块,填充成正好1366*768个色彩块。这些拿来充数的像素块,和真实的像素块放到一起。就好比一个正规军,里面掺了很多杂牌军一样,只能是队伍不好带了。

PPI大的手机显示效果就越精细吗?

要回答这个问题,就要先明白,一个像素到底包含了什么?一个像素其实就是一个色彩块,你不信的话,就去前面看看那张风雨雷电图。同样的一英寸,苹果手机能展示469个色彩,华为只能展示424个色彩,当然是苹果手机的显示效果更好了。也就是苹果6在出厂时,早就在屏幕上设置了同样个数更小的像素块,也就意味着可以显示更多的色彩。

屏幕的清晰程度其实是分辨率和尺寸大小共同决定,用ppi指数衡量屏幕清晰程度更加准确。

屏幕尺寸固定,分辨率越高,PPI就越高吗?

废话,看公式啊。

分辨率固定,屏幕尺寸大了,PPI是不是就少了?

废话,看公式啊。还有,苹果6和荣耀7的例子还很鲜活的摆在这呢。

PPI不变,屏幕尺寸变大,分辨率是不是也会变大?

废话,看公式啊。

鉴于篇幅太长,我本来还想把安卓手机上app的图标显示问题说一说,看来只能留到下一次了。

本文转载自:

共有 人打赏支持
deepler
粉丝 55
博文 66
码字总数 35598
作品 0
西安
高级程序员
html viewport标签说明

先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位: px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi…… 接下来分类给大家介绍下: ① ...

半张一块
2016/07/25
20
0
带你深入了解VIEWPORT和PX

原文出处:tgideas.qq 刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320、640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?——这源...

tgideas.qq
2015/11/13
0
0
前端不止:Retina屏幕下两倍图

所见不一定即所得 眼睛是心灵的窗户,也是蒙蔽你的一种途径。 假设,我给你一张图片,你觉得肉眼可以观察到全部的细节吗? image.png 屏幕上一张清晰的图片 肉眼在屏幕上看到图片的清晰度由三...

ThoughtWorks中国
2017/12/08
0
0
扒一扒那些px、pt、ppi、dpi、dp、sp之间的关系

原文出处:Snow 做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结。 先介绍下各自的定义: px:pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元 pt: point,点,...

Snow
2015/09/29
0
0
一篇文章搞懂CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因。 1、PX(CSS pixels) 1....

半撇私塾
2017/11/11
0
0
css中的像素在iphone6 plus与iphone6渲染的不同效果

最近做项目中,遇到了一个问题,就是UE拿着一张图片来问我,为什么iphone6下面的一个图片,在iphone6 plus下看起来更大。于是我好说歹说,让他接受了这种变化,但是其实这种变化的原理,还是...

侯禹
2016/01/28
943
0
墙裂科普:移动端适配的基础概念

近几年移动端设备数量增长迅速,导致各种设备屏幕尺寸不一,分辨率也是不尽相同。 作为一个前端开发者,就不得不面对移动端页面适配的问题,而适配的终极目标,就是让页面能在不同尺寸,不同...

沃趣葫芦娃
07/02
0
0
像素与分辨率之间的关系

1.像素定义 构成影像的最小单位(就是一个小方点) 2.分辨率定义 单位长度内,像素的个数 例如以图片的像素是640×480,其尺寸大小是:长:3.556寸,宽:2.667寸;该图片的分辨率就是:640÷3...

爱喝水的小熊
03/06
0
0
DICOM世界观·第二章:[1]像素 Pixel (Picture Element)

背景: 原本该小节想直接套用上世纪一片著名论文《A Pixel Is Not A Little Square》作为标题,怎奈英文原文信息量较大,内部蕴含了很多关于采样定理的信息论知识,虽然通读数遍但依然感到些...

zssureqh
2017/12/11
0
0
移动端 UI 适配最佳实践(上)

iOS, Android 两个最流行的系统,运行这两款系统的设备千千万,他们的屏幕尺寸也是千千万,这可苦了设计师和攻城狮。 此文试着从原理层面及实践层面来分析下该问题。 基础概念 屏幕尺寸 这个...

yinjq
2015/11/09
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

springboot常用注解

@SpringBootApplication: 包含@Configuration、@EnableAutoConfiguration、@ComponentScan 通常用在主类上。 @Service: 用于标注业务层组件。 @RestController: 用于标注控制层组件(如strut...

GoldenVein
8分钟前
0
0
梯度下降法求多元线性回归及Java实现

对于数据分析而言,我们总是极力找数学模型来描述数据发生的规律, 有的数据我们在二维空间就可以描述,有的数据则需要映射到更高维的空间。数据表现出来的分布可能是完全离散的,也可能是聚...

冷血狂魔
13分钟前
2
0
如何进行大数据的入门级学习?

不知道你是计算机专业应届生还是已经从业者。总之,有java基础的学生学习大数据会轻松很多,零基础的小白都需要从java和linux学起。 如果你是一个学习能力特别强,而且自律性也很强的人的话可...

董黎明
22分钟前
0
0
使用Parcelable传递复杂参数

最近做AIDL传递对象,对象必须实现Parcelable的方法才可以被传递。 @Override    public int describeContents() {//这个 默认返回0就行了。        return 0;    }    ...

火云
23分钟前
0
0
十大Intellij IDEA快捷键

Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论。每个人都有自己的最爱,想排出个理想的榜单还真是困难。以前也整理过Intellij的快捷键,这次就按照我日常开发...

HJCui
33分钟前
0
0
word 使用mathtype 编写 数学公式

下载安装,这个链接命名。。。。 http://www.mathtype.cn/xiazai.html 安装之后会多出一个选项 使用内联方式插入图表 编写公式的界面 设置支持latex 语法 输入公式回车就可以看到结果...

阿豪boy
51分钟前
0
0
Promise

定义 Promise是异步编程的一种解决方案,所谓Promise就是一个容器,里面保存着某个未来才会结束的事件(通常是一个一步操作)的结果。 特点: 2.1 对象的状态不受外界影响,三种状态pending...

litCabbage
今天
1
0
设计模式:适配器模式

说明:在不改变旧接口代码的前提下,为该接口新增其他接口的功能 适配器模式可以分为:类适配器模式、对象适配器模式、接口适配器模式 前两种模式下,我会以播放器为例。老版的播放器(Playe...

人觉非常君
今天
0
0
使用VsCode搭建Java开发环境,创建springboot应用

1、在 Visual Studio Code 中打开扩展视图(Ctrl+Shift+X),输入关键词java、spring分别下载Java开发插件包和springboot插件包 2、配置参数 点击设置按钮,进入设置选项,配置用户设置 在用户...

qsyan
今天
24
0
调教属于你的“贾维斯”(给自己挖了一个很大的坑)

今天玩一下现在很火的人工智能。 废话不多说,先来看几张图: 看出什么蹊跷了吗? 再来看一个视频: https://www.zhihu.com/video/1002567561061511168 (演示网址和代码见文末) 人工智能离...

crossin
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部