（1）4个像素
物理 分辨率,是屏幕呈像的最小单位一个物理像素占据的实际屏幕尺寸在不同设备上是否一样？不一样设备出厂时,该款设备所包含的物理像素的点数和一个物理像素所占据的实际屏幕尺寸是不会变的
css 是web开发者使用的最小单位一个css像素最终一定会转成物理像素去屏幕上呈像
独立 是设备对接css像素的接口，一旦css像素与独立像素挂上勾（width=device-width）此时像素比才能发挥真正的作用
位图 图片的最小单位位图像素与物理像素一比一时，图片才能完美清晰的展示
（2）3个视口
布局 决定页面的布局
视觉
决定用户能看到什么
一个css像素到底占据多少个物理像素和视觉视口有极大的关系
一个视觉视口的实际尺寸是确定的（屏幕尺寸）
一个视觉视口包含的物理像素的个数是确定的（分辨率）
一个视觉视口包含的css像素的个数是不确定的（用户的缩放行为有关）
理想
设备独立像素所代表的值
（3）2个操作 initial-scale
放大 放大一个css像素的面积,视觉视口的尺寸变小，一个css像素包含的物理像素的个数变多
缩小 缩小一个css像素的面积,视觉视口的尺寸变大，一个css像素包含的物理像素的个数变少
（4）像素比 物理像素/设备独立像素 一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数。