1 屏幕尺寸:
指屏幕的对角线长度,单位是英寸,1英寸=2.54厘米
2 屏幕分辨率: (横纵向上像素点的个数)
横纵向上的像素点数,单位是px,1px = 1个像素点。
一般以纵向像素*横向像素来表示一个手机的分辨率,如1920 * 1080(这里的1像素指的是物理设备的1个像素点,即竖向的高度上有1920个像素点,在横向的宽度上有1080个像素点。)
3 屏幕密度:
每英寸上物理像素的个数,单位是PPI,即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关
像素密度为屏幕对角线上每英寸上的像素点个数
如上图,像素密度 = 2204PX / 5英寸 = 441 PPI
4 四个像素:
4.1 物理像素
物理像素是设备呈像的最小单位
屏幕分辨率代表着物理像素
一个物理像素占据的实际屏幕尺寸在不同设备上是否一样?
不一样
设备出厂时,该款设备所包含的物理像素的点数和一个物理像素所占据的实际屏幕尺寸是不会变的
4.2 css像素
CSS像素是浏览器中的最小单位(即web开发者使用的最小单位)
CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量Web页面上的内容
一般情况下,CSS像素被称为与设备无关的像素,简称为“DIPs”
在一个标准的显示密度下,一个CSS像素对应着一个设备像素
一个css像素最终一定会转成物理像素去屏幕上呈像
4.3 设备独立像素
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以有程序使用的虚拟像素(比如:CSS像素),然后由相关系统转换为物理像素。
是设备对接css像素的接口,一旦css像素与独立像素挂上勾(width=device-width)
此时像素比才能发挥真正的作用
4.4 位图像素
位图像素是图片的最小单位
位图像素与物理像素一比一时,图片才能完美清晰的展示
5 像素比(DPI)
官方定义:物理像素/设备独立像素
一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数
像素比是个数比,不是面积比
即CSS像素等同于设备独立像素
1CSS像素 = 4倍物理像素