前传

  • 1 in(英寸) = 2.54 cm = 25.4 mm
  • 液晶屏显示图像,放大来看都是一个个小点点组成的,这些小点点就是像素点(px)。
  • 一个像素本身是没有尺寸或物理表现的,问一个像素的大小 ? 是一个混淆别人的好方法,因为这是个诡计的问题。一个像素没有标准大小,没有物理价值或意义。故两个不同的设备里的1个像素是不同的。
  • pic
    PPI

屏幕物理尺寸(一般用英寸来度量)

  • 直接点说就是屏幕 宽和高各多少英寸对角线多少英寸。一般说主屏尺寸5.5英寸,指的是对角线尺寸
  • 一块屏幕宽高有几英寸是在生产的时候就被定好的,屏幕物理尺寸不可变(除非屏碎了 ~_~ )。

屏幕像素大小(分辨率)

  • 泛指量测或显示系统对细节的分辨能力。像这种表达式 2560x1440 2960x1440 (风车车目前使用的手机) 通常也称为 分辨率 (其实是物理分辨率)是指在屏幕上水平和垂直显示的设备像素的数量 像素计数

物理分辨率(和屏幕像素大小是同一个东西)

  • 也叫标准分辨率,真实分辨率,指显示屏的最佳分辨率。即屏幕一行实际存在的设备像素个数 乘以 一列实际存在的设备像素个数 的 数学表达式 ( 像这样 2560x1440 2960x1440 ),是显示屏固有的参数,不能调节( 貌似手机是可以调节的,可以往小了调 ),其含义是指显示屏最高可显示的像素数。

逻辑分辨率

  • 是页面上抽象的像素点的多少,其单位为dpi(dot per inch)。每英寸有多少逻辑像素

DPI

  • DPI 是 Dot Per Inch,每英寸多少点,在早的时候,这个单位是用来描述打印机性能的,意思是这台打印机最多能用多少个墨点来打印一英寸的内容

屏幕像素密度PPI (pixels per inch)

  • PPI (屏幕像素密度) 每英寸能容纳多少设备像素,也是物理单位 。表示沿着对角线,每英寸所拥有的设备像素数目,PPI的数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高,颗粒感越弱,图像更清晰。
  • 屏幕物理尺寸 一样,一个屏幕的宽高及对角线各能容纳下多少颗设备像素也是固定的,故 PPI 也是在生产的时候就被定好的。下图是风车车用的手机的出厂参数:
  • pic
    S8屏幕参数
  • PPI 计算方法(以上图为例子):
    • PPI = ( V 2960 x 1440 ) / 5.6 = 568 (约等于,屏幕尺寸取5.8英寸) 京东给的数据为 570 PPI
    • 对角线的设备像素个数 / 对角线长度(单位英寸)= PPI ( Pixels / Inch )
  • 针对显示器的设计时,DPI === PPI
  • PPI 越高,每英寸设备像素点越多,图像越清晰;可以类比物体的密度,密度越大,单位体积的质量就越大,PPI 越高,单位面积的设备像素越多。

缩放因子(Scale)

同一张图片在不同显示器上显示大小为什么不同?

  • 图片显示大小是由什么决定的呢? 不是屏幕尺寸(英寸)也不是分辨率。而是点密度(单位长度容纳的像素数量也是发光点数量)单位为 px/in 也就是 PPI
  • PPI 越低图片显示的越大,PPI 越高图片显示的越小
  • 想让不同屏幕显示图片的大小相同,就需要对图片进行缩放,给高 PPI 屏提供更大的图片
  • 高 PPI 屏幕需要更大的图片才能得到同样的显示效果,反之亦然。ppi和图片px的关系如下
    px1/px2=ppi1/ppi2
  • 选定一个ppi值作为基础绘制图片,用ppi的比值计算出图片缩放比例就可以适配各种屏幕
    px2=px1*(ppi2/ppi1)

Retina 显示屏

ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(例如苹果公司的Retina显示屏)

设备像素(Device Pixels )

  • 设备像素又称物理像素(physical pixel),官方的解释是:显示屏幕的最小物理单位,每个dp包含自己的颜色、高宽。
  • 设备能控制显示的最小单位,我们常说的1920×1080像素分辨率就是用的设备像素单位
  • 任何设备屏幕的物理像素的数量都是固定不变的

设备独立像素(device independent pixels)

  • 设备独立像素,与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素。也称为逻辑像素,简称 dips
  • CSS像素 = 设备独立像素 = 逻辑像素

CSS像素(CSS pixels)

  • CSS像素是Web编程的概念,独立于设备的,是抽象的,不是实际存在的。是浏览器专门为web开发者提供的一个抽象概念,用来逻辑上精确度量网页上的内容。只跟我们平时写的css样式有关,与分辨率(比如720px*1280px)里的px没关系。
  • eg:平时写的width:200px;height:300px;都是与 设备无关
  • 1个CSS 像素占多少个物理像素是不确定的,这个问题通过页面的放缩比较容易理解。页面放大时,很明显一个CSS像素将占用更多的物理像素,页面缩小时,一个CSS像素占用的物理像素也变少。
  • 一个CSS像素相当于多少个设备像素取决于两个条件:页面是否缩放屏幕是否为高密度

设备独立像素和设备像素的关系?

  • 因为设备独立像素是包含了CSS像素的大类,所以我们可以直接讨论设备独立像素和设备像素之间的区别和联系。
  • 做一个总体总结:
  • PC端 —— 1个设备独立像素 = 1个设备像素 (在100%,未缩放的情况下,如果缩放到200%可以说1个设备独立像素 = 2个设备像素)
  • 移动端 —— 根据设备不同有很大的差异,根据 ppi 不同我们可以得到不同的换算关系,标准屏幕(160ppi)下 1个设备独立像素 = 1个设备像素

什么是viewport ?

布局视口(layout viewport)

  • PC端为浏览器窗口可视范围(宽度 不含滚动条)
  • 手机浏览器厂商为了让用户在小屏幕下网页也能够显示地很好,所以把视口宽度设置地很大,一般在 768px ~ 1024px 之间,最常见的宽度是 980px。
  • 布局视口我们是看不见的,只知道网页的最大宽度是 980px ,并且被缩放在了屏幕内。
  • document.documentElement.clientWidth/Height返回布局视口的尺寸
  • 可以这样设置布局视口的宽度:
  • <meta name="viewport" content="width=640">
  • 媒体查询与布局视口 700px 指的是布局视口的宽度
  • (min-width: 700px){
    1
    2
        ...
    }

视觉视口(visual viewport)

  • 视觉视口是用户正在看到的网页的区域,大小是屏幕中CSS像素的数量
  • window.innerWidth/Height返回视觉视口的尺寸(包含滚动条)

理想视口(ideal viewport)

  • 苹果引入了理想视口的概念,它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度,用户进入页面的时候不需要缩放。
  • 现在讨论所谓的『最理想的宽度』到底是多少?其实,如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口:
  • <meta name="viewport" content="width=device-width">
  • 定义理想视口是浏览器的事情,并不能简单地认为是开发者定义的,开发者只能使用。
  • screen.width/height返回理想视口的尺寸,有严重的兼容性问题—可能返回两种值:
    • 理想视口的尺寸(下载浏览器)
    • 屏幕的设备像素尺寸(内置浏览器)

缩放与设备像素、CSS像素的关系

  • 缩放是在放大或缩小CSS像素,比如一个宽度为 200px 的元素无论放大,还是200个CSS像素。但是因为这些像素被放大了,所以CSS像素也就跨越了更多的设备像素。缩小则相反。

缩放与视口

  • 缩放会影响视觉视口的尺寸
    • 页面被用户放大,视觉视口内CSS像素数量减少;被用户缩小,视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。
  • 用户缩放不会影响布局视口
    • 注意,这是『用户缩放』

设备像素比 DPR(device pixels ratio)

  • DPR = 设备像素(横或纵向个数) / 设备独立像素(横或纵向个数) 是指在移动开发中1个设备独立像素占用多少设备像素
  • 当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素
  • 当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素
  • 当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素
  • 理想的dpr = 屏幕横向设备像素 / 理想视口的宽 (实际的DPR可能不是理想的) 我手机横向1440个设备像素,理想视口为360 故 DPR = 1440/360 = 4
  • 在JS中可以通过 window.devicePixelRatio 获取 理想的dpr

什么影响我们的设计??

  • 假设我们设计了一个109 * 109px的蓝色方块,分辨率为109PPI。而屏幕像素尺寸为2560x1440,物理宽度为23.5英寸,这导致该屏幕的PPI也刚好为109PPI。刚好适配,所以正方形的宽度为1英寸,高度为1英寸。
  • 现在采取同样的宽度为23.5英寸的屏幕,72PPI。在这种情况下,相同的蓝色正方形将显示为相同的物理尺寸的1.5倍。

  • pic
    不同PPI的屏幕显示

参考网址

http://sebastien-gabriel.com/designers-guide-to-dpi/
https://github.com/riskers/blog/issues/17
https://github.com/riskers/blog/issues/18
https://riskers.github.io/share/share/flexible.htm
https://github.com/ksky521/nodePPT

http://www.jianshu.com/p/3a07024963d9
http://div.io/topic/1092
https://github.com/amfe/article/issues/17
https://github.com/amfe/lib-flexible