像素

像素即px，是画面中最小的点（单位色块）。像素的大小是没有固定长度值的，不同设备上1个单位像素色块的大小是不一样的。

px是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。

分辨率

分辨率=画面水平方向的像素值 * 画面垂直方向的像素值。

分辨率可以分为两方面：屏幕分辨率和图像分辨率。

屏幕分辨率：

例如，屏幕分辨率是1024×768，也就是说设备屏幕的水平方向上有1024个像素点，垂直方向上有768个像素点。像素的大小是没有固定长度的，不同设备上一个单位像素色块的大小是不一样的。例如，尺寸面积大小相同的两块屏幕，分辨率大小可以是不一样的，分辨率高的屏幕上面像素点（色块）就多，所以屏幕内可以展示的画面就更细致，单个色块面积更小。而分辨率低的屏幕上像素点（色块）更少，单个像素面积更大，可以显示的画面就没那么细致。
图像分辨率：

例如，一张图片分辨率是500x200，也就是说这张图片在屏幕上按1:1放大时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。在同一台设备上，图片分辨率越高，这张图片1:1放大时，图片面积越大；图片分辨率越低，这张图片1:1缩放时，图片面积越小。（可以理解为图片的像素点和屏幕的像素点是一个一个对应的）。但是，在屏幕上把图片超过100%放大时，为什么图片上像素色块也变的越大，其实是设备通过算法对图像进行了像素补足，我们把图片放的很大后看到的一块一块的方格子，虽然理解为一个图像像素，但是其实是已经补充了很多个屏幕像素；同理，把图片小于100%缩小时，也是通过算法将图片像素进行减少。

移动设备分辨率

说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)
dpi/ppi是表示一个每inch多少个物理像素dot的单位
在最开始是160dpi/ppi
后来因为技术的提高，为了追求高清屏幕，有了320dpi/ppi以上等等的屏幕
下面继续说移动设备分辨率
我们可以理解分辨率就是长宽分别有多少个物理像素dot
但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高

网页中的px（css像素）

在桌面浏览器：1px（下面我们读成‘css像素’）代表1个物理像素，也就是1css像素 = 1物理像素
没有加meta viewport标签时候：移动端viewport宽度为980px或者1024px，这时候1css像素不确定是几个物理像素（根据分辨率来算）
写个20px的文字看看效果（见演示）
在加了meta viewport标签以后呢？我们引入另外一个单位：密度独立像素dp/dip
dp/dip是在不同设备都显示为同一大小的单位（见演示）
简单理解，在使用了<xmp><meta name="viewport" content="width=device-width, initial-scale=1"></xmp>之后，所有1px = 1dp/dip
添加meta标签后20px的文字（见演示）
设备的独立像素都是可以查到的