逻辑像素与物理像素引发学习型探索

目的

做一个前端或或者产品开发者， 在涉及到ui方面， 难免会遇到不同分辨率下， 同一个ui会有不同在视觉上差异， 弄懂这些对于我们来说着非凡意义。
同时也顺便去了解像素密度， 分辨率， 屏幕尺寸，设备像素比等相关概念。

关于像素

上面的像素图，我们都很熟悉，可能小时候也做过像素拼豆豆这样的手工。其实这就是在电脑上构成图片显示出来的原理，电脑上显示的图像就是由一个个有色彩的小方格拼接起来组成的，那么为什么我们一眼看不出来呢？那是因为电脑上划分的一个个的小方格太小了，很密集，拼接起来就欺骗我们的肉眼看起来就是一条条线画出来的图了。

比如我们正常看到的图片是这样的：

但实际上你放大 n 倍去看，看到的是这样的：

看到了吧，也是和我们常见的像素图是一样的，也是一格格地拼凑起来的，这么小小的一个图片，拼凑成其的小格子有好几万个，所以在我们肉眼看来就成了线条。
上述的一个个的小格子被定义为一个单位，叫做 像素 ，2像素就是指占据了两个小格子的大小，当然，我们描述一个图片占的小格子数总不能一个个地数小格子吧，图片是矩形，因此常常描述一个图片尺寸时就说多少乘多少像素，像素就是小格子，比如上面的这个图片的尺寸就是 300 * 300 像素，也就是说该图片的长、宽都有300个小格子，该图片一共占 300 * 300 = 90000 个小格子。
因此小格子就是像素，1像素 就是一个小格子的大小，你若问那 1像素 到底有多大，多少厘米或毫米？ 停，都说了小格子是个矩形，要论大小也得是多少平方厘米或平方毫米，但是小格子的大小就是 1像素，像素是个像厘米或毫米一样的定义好的单位，专门用于电子屏幕上描述图形尺寸的单位，但是像素不像厘米、毫米等长度单位一样有固定的大小，像素是没有固定大小的，奇怪吧，但事实就是这样，只要知道 1像素 就是一个小格子就可以了。

从像素到分辨率

知道了 像素 ，再来讨论下屏幕尺寸
关于各种设备屏幕的尺寸是以 英寸 为单位的，英寸是一个长度单位，是有固定大小的，可以去百度换算下单位成厘米看看有多大。比如我的电脑尺寸是 15.6 英寸，注意各种电子设备的屏幕尺寸指的是屏幕斜对角线的大小，不然你想，屏幕不也是个矩形吗？怎么能用一个长度单位描述呢？应该是 长度 * 宽度 描述吧。由于显示屏幕不是胡乱设计比例的，是有固定比例的，如 16 : 9 、4 : 3 等等，因此屏幕给出斜对角线的大小，具体屏幕矩形的长宽就可以根据屏幕的设计比例计算出来
现在显示屏准备好了，如何将图片显示出来呢？那就将屏幕划分成一个个的小格子，然后在对应位置给小格子上色，全部上完