1物理像素
是指的手机或电脑显示器的晶体管？大小，如手机分辨率为1080x980,那宽一共有1080个晶体管，即1080个物理像素
2独立像素
设备上逻辑上衡量的长度，一般是设备可视区域的大小，是手机设置好的不会改变。独立像素大小也比较不固定，一般为320像素、375像素等等。
3window.devicePixelRatio
dpr=物理像素/独立像素。用以衡量一个独立像素即1px代表了多少个物理像素，来保证字体、或图片的清晰图。
电脑的分辨率为1080*980，但电脑屏幕却比较大，说明电脑上物理像素比较大。
手机的分辨率为1080*980，但手机屏幕却比较大，说明手机上物理像素比较小。
在pc端和移动端分为设置200px即200个物理像素，故电脑上显示的比手机上的看着要长，根据dpr来看，电脑上显示的物理长度是手机上长度的dpr倍。
4viewport
viewport默认是手机上的可视区域，但手机端浏览器为了让手机端也可以比较兼容的显示pc端的网页，故一般默认的viewport都比较大。显示网页时，手机屏幕可视区域小于浏览器默认的viewport，所以会出现横向滚动条。
我们在开发移动端APP时，为了页面的美观和用户体验，一般不能够出现横向滚动条，故使用meta标签将viewport设置为device-width，保证webview可视区域和屏幕可视区域一致，不出现滚动条。
device-width指的是移动端即手机端独立像素的大小。在设置了viewport=device-width后，移动端设置css1px=dpr个物理像素，达到pc端和移动端显示大小一致的效果。
5动态设置根元素即html元素font-size以及px转变为rem来实现兼容
移动端开发时，需要兼容各个大小的手机。故需要根据设计稿，来动态设置根元素的font-size来达到兼容的目的，即不同的手机上，看着设计、比例、大小都合适。1rem=根font-size。
若设计稿为750px，有一个元素的大小为50px，你可以判断50在750里占的比例为多少，即50/750=0.067
现在手机屏幕独立像素为320px，那此元素现在大小为320*0.067=21.44px。
故为了方便计算，可以在页面加载时，使用js动态设置页面的font-size=window.clientWidth/10；
为了方便转换，设置css方法px2rem($design,$basefont){return $design/$basefont * 1rem}；$design为设计稿上大小，$basefont为设计稿大小/10。
ps:仅为自己理解，有不对的地方欢迎大家讨论