移动端开发基础

移动开发像素知识

px:css pixels 逻辑像素,浏览器使用的抽象单位

dp:物理像素(设备无关像素),跟手机设备有关

dpr:设备像素缩放比,控制px和dp两者的关系

DPI:打印机每英寸可以喷的墨汁点

PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度

计算公式:1px = (dpr)^2 * dp


以iphone5为例子:(屏幕分辨率:1136 * 640,4英寸,dpr:2)

通过上述公式可计算得:320px * 568px(有些人不会算的,自己慢慢琢磨!)


关系图

如果还是不懂,可以直接通过浏览器的开发者模式观看。


手机模拟器


PPI(每英寸的像素密度)的计算:(以iphone5为例子)

计算公式

也可以知道PPI越高,屏幕越清晰,可视度越低,系统的默认缩放比(dpr)越大。

可以从电脑的设备分辨率知道(分辨率越大,图标显示越小;分辨率越小时,图标显示变大,同时屏幕清晰度降低)

为什么呢???    因为:1px中等于更多的物理像素了!!!


拓展下:

Retina屏(高清屏):dpr都是大于等于2

你可能感兴趣的:(移动端开发基础)