手机屏幕（了解）

一、手机屏幕（了解）

移动设备与 PC 设备最大的差异在于屏幕，这主要体现在**屏幕尺寸**和**屏幕分辨率**两个方面。
 

1.1、屏幕尺寸

通常我们所指的**屏幕尺寸**，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示:( 3.5英寸 ,  4.7英寸,  5.5英寸 )

     iPhone 3 / 4                   iPhone 6                     iPhone 6  plus

1.2、分辨率

而**分辨率**则一般用**像素来度量 px**，表示**屏幕水平和垂直方向的像素个数**，

例如 ：1920*1080 px 分辨率

指的是屏幕垂直方向和水平方向分别有 1920 和 1080 个像素点而构成。

如下图所示

1.3、长度单位

在 Web 开发中可以使用 px（像素）、em、rem、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用 px（像素）做为长度单位。

pt(点) ios开发是以点做为单位的，是抽象的单位，是设备的独立像素。

我们可以将上述的几种长度单位划分成**相对长度单位**和**绝对长度单位(in、cm)**。

> iPhone 3G/S 的分辨率是480 * 320 px

> iPhone 4/S  的分辨率是960 * 640 px

如上图所示，iPhone3G/S 和 iPhone4/S 的**屏幕尺寸**都为 **3.5 英寸（in）**但是**屏幕分辨率却分别为 480  *  320px、960   *  480px**

1.4、像素密度( PPI )

> 像素密度PPI ：就是屏幕每英寸的像素数量

**DPI**（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了 DPI 的概念。

由于**计算机显示设备**中的最小单位不是墨汁点而是像素，所以用 **PPI**（Pixels Per Inch）值来表示**屏幕每英寸的像素数量**，我们将 **PPI、DPI 都称为像素密度**，但 **PPI** 应用更广泛，

1）计算像素密度

例如下图的像素密度（PPI = 10）

> 下图屏幕的宽为1英寸，1英尺的像素数量为10 px

例如下图的像素密度（PPI = 20）

> 下图屏幕的宽为1英寸，1英尺的像素数量为20 px

2）计算iphone 4手机的像素密度（PPI = 330）

iphone 4手机 是 3.5 英寸。先求出3.5英寸中的像素个数，在除与3.5就是每英寸的像素个数

PPI是每英寸的像素点的个数。

**PPI 值的越大**说明单位尺寸里所能容纳的**像素数量就越多**，所能**展现画面的品质也就越精细**，反之就越粗糙。

**Retina** 即**视网膜屏幕**，苹果注册的命名方式，意指具有较高 PPI（大于 320）的屏幕。

1.5、像素

1）物理像素

**物理像素**，顾名思义，显示屏是由一个个**物理像素**点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的**物理像素点**就固定不变了。

> 1）物理像素大小不是固定的，它与PPI 是有关系。例如：PPI越大，物理像素越小。

> 2）物理像素只能获取不能修改

 

 2）css像素(又叫设备像素，设备宽度)

CSS像素是一个抽像的单位，**主要使用在浏览器上**，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。

**1.PC 端的css像素默认和物理像素保持一致的（1 个单位的 CSS 像素等于 1 个单位的物理像素）**

**2.iPhone3G的css像素默认和物理像素保持一致（1 个单位的 CSS 像素等于1 个单位的物理像素）**

**3.iPhone4/5/6的css像素默认和物理像素不一致（1 个单位的 CSS 像素等于2 个单位的物理像素）**

**4.iPhonex/6/7/8plus的css像素默认和物理像素不一致（1 个单位的 CSS 像素等于3 个单位的物理像素）**