国内外移动端web适配屏幕方案总结

基础知识点

设备像素：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。 iPhone5的物理像素是640X1136。

PS：在普通屏幕下，1个css像素对应1个物理像素(1:1)。

       在超高像素密度屏幕（Retina显示屏）下，1个css像素对应4个物理像素(1:4)。（这里指专指苹果超高清屏幕）

       因此，在移动端方面就需要设置dpr来保证超高清屏显示图片不会失真。

 

逻辑像素（ logical pixel）独立于设备的用于逻辑上衡量像素的单位。css像素就是逻辑像素，CSS像素是Web编程的概念。iPhone5的逻辑像素是320X568。

 

设备独立像素 （density-independent pixel） 简称 dip，单位dp，独立于设备的用于逻辑上衡量像素的单位 。

PS：逻辑像素 ≈ 设备独立像素。（设备独立像素是android提出的）

 

设备像素比 (device pixel ratio)

设备像素比 = 设备像素 / 设备独立像素              // 在某一方向上，x方向或者y方向

iphone5 为例： 640X1136 / 320X568 = 2

 

屏幕像素密度（Pibel Per Inch）简称 ppi ，单位是 dpi，一般用来计量电脑显示器，电视机和手持电子设备屏幕的精细程度。通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。

屏幕像素密度=屏幕宽度（或高）像素 / 英寸宽屏幕（或高）英寸

 

关于设计与开发之间关系

网页设计师按照设备像素为单位制作设计稿。

前端工程师按照设备像素比进行换算后的逻辑像素为单位制作网页。

 

如：设计图里有元素宽度是100px，那么得到宽度会是 100px/2 = 50px。（仅供参考，以iphone6设计稿的尺寸为例）

转载于:https://www.cnblogs.com/ipoodle/p/10726143.html