-
屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸：
iphone4 3.5英寸
iphone5 4英寸
iphone6 4.7英寸
iphone6 plus 5.5英寸
iphoneX 5.8英寸 -
像素：显示屏的画面上表示出来的最小单位。每个像素的大小是不固定的，他是根据设备的分辨率决定的
-
分辨率：屏幕分辨率是指纵横向上的像素点数，单位是 px
-
物理像素（physical pixel）：控制显示的最小单位。买手机的时候会有一个
n x m的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度，常见屏幕分辨率：
iphone4 640*960
iphone5 640*1136
iphone6 750*1334
iphone6 plus1080*1920
iphoneX 1125*2436 -
像素密度(pixel per inch)：即dpi或
ppi，屏幕每英寸所占的物理像素点。PPI=像素数量/物理尺寸（英寸数）像素数量指的是一个维度的，比如X轴的像素数量，或Y轴的像素数量，或者对角线的像素数量。而不是总的像素数量。
苹果区分手机屏幕是按照：非高清屏，高清屏（视网膜屏即retina屏）、超高清屏;常见屏幕ppi:
Iphone4 326ppi
Iphone5 326ppi
Iphone6 326ppi
Iphone6 plus 401ppi
Iphone X:424ppi -
逻辑像素 | 设备独立像素(density-independent pixel)：简称dip或dp， 设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。
screen.width
- CSS像素：就是CSS里的
px，上面已经讲了是viewport中的一个小方格。CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。
-
设备像素比(device pixel ratio) ：设备像素比简称为
dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：window.devicePixelRatio = 设备像素比 ＝ 物理像素 / 设备独立像素如：iPhone6的dpr为2，物理像素750（x轴）,则它 的逻辑像素为375。 也就是说，1个逻辑像素，在x轴和y轴方向，需要2个物理像素来显示，即：dpr=2时，表示1个CSS像素由4个物理像素点组成。如下图：
常见设备dpr:
Iphone5： 2
Iphone6 ：2
Iphone6 plus ：3
Iphone X： 3
问题1：为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢？
iPhone6的满屏宽度是375px（Viewport’s device-width (in CSS pixels)：375px），而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍，并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面，设计师一般给出750px的设计图，我们再根据需求对元素的尺寸设计和压缩。
问题2：1px 在高清屏上变粗了，为啥？
- 1px问题由于有retina屏的存在
- 设计稿一般做成满屏宽度的2倍
- 因此在dpr=2的retina屏下，会显示成2px
- 如果写成0.5px，在ios7和安卓，会把0.5px解读成0px
解决方案：
方案一：
设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示0.5px的线条。
网友评论