共计 1082 个字符，预计需要花费 3 分钟才能阅读完成。
基础概念
dpi
每英寸所含有的像素点的个数。
物理像素
移动设备出厂时，就具备的分辨率，小米 5 1920×1080 iphone6 1334×750
逻辑像素
Give your page a <meta name=”viewport” content=”width=device-width”>, read out document.documentElement.clientWidth, and most browsers will give you the width of the layout viewport, which now equals the dips width.
当你在 html 设置了 <meta name=”viewport” content=”width=device-width”>，那么页面就会以移动设备的 dpis width 作为逻辑像素。
dpis width & scale
dpis width 如何得出？
你先需要计算 dpi
小米 5 为例，sqrt(19202 x 10802) / 5.15(屏幕的物理尺寸) = 427.7
计算 scale
scale = 427.7 / 160 约等于 3.(这个计算是针对于 android 手机，不过 ios 也类似，至少目前的机型都符合这个计算，有清楚的大佬可以告知)
android 以 160 的倍数作为分隔点，来划分不同手机逻辑像素的缩放比例。
160 mdpi
320 hdpi
480 xhdpi
计算 dpis width 也就是 逻辑像素
dpis width = 1080 / 3 = 360
那么结论来了
开发时其实只需要考虑逻辑像素，android 中 dp 单位和移动前端中的 px 是一样的，ios 中用的也是逻辑像素。
那么开发时，图片我们改如何选择呢？
1280 x 720、1920 x 1080、2560 x 1440, 这物理分辨率不同的手机之间有什么区别？
还是以小米 5 为例，逻辑像素是 360，那么其实对于小米 5 来说 360px(物理像素)的图片就可以正常显示，并且不会拉伸，那么为了让图片的色彩更加好，可以使用 720px(物理像素)的图片或者是 1080px(物理像素)的图片。
但是 360 的逻辑像素只是小米 5 的，不同手机之间存在差异性，为了让所有手机上面的图片较为正常的显示，那么应该选取一个物理像素较高的图片。
android 端通常在本地准备了多套的图，根据不同 scale 来选择不同的图片，以便在所有手机上都能较好的显示，同时保证了性能与展示效果，当然你可以选择仅仅使用一张最大的图，但代价便是内存占用和性能问题。
移动 web 端更是如此，因为移动 web 端的图片通常是从服务器获取，那么如果都统一使用最大的图片，势必会影响加载速度, 所以根据实际使用情况，自己斟酌。
