一直对于移动端网页开发都不咋熟悉，之前也写过移动端的页面，但是似乎并没有遇到什么问题，就正常写css。对于一些概念也不熟悉，什么两倍图，移动端兼容问题等。因为后续会进入act-native的开发，想着整理一些概念也是有必要的。
1.前端不止：Retina屏幕下两倍图屏幕分辨率:屏幕有多少个像素(也称为设备像素，物理属性，不可变)，widthheight。比如iPhone7,分辨率是``。
疑问:电脑的调整分辨率是干嘛用的？
图片大小:图片长宽的像素个数:widthheight，如某张图片是
假如一张14*的图片在iPhone7中进行完全展示，那么一个图片像素对应一个设备像素，因此是完全保真的显示。
像素密度（PPI）:每英寸所拥有的的像素数目,PPI数值越大，代表显示屏能够以更高的密度显示图像，画面的细节会更丰富。
以Retina屏幕为例，它并不是像普通显示器那样通过增大尺寸来增加分辨率，而是靠提升屏幕单位面积内的像素数量，即PPI来提升分辨率，这样就有了高像素密度屏幕
1.1web中的CSS像素CSS像素是一个抽象概念，设备无关像素，简称DIPS，device-independent像素，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
同样的css大小，在mobile，pc上显示的大小是一样的，(如用尺子测量都是cm)。
devicePixelRatio设备像素比:
即设备物理像素(屏幕分辨率)与设备独立像素(css像素)的比例:window.devicePixelRatio=物理像素/设备独立像素
普通密度桌面显示屏的devicePixelRatio=1高密度桌面显示屏（MacRetina）的devicePixelRatio=主流手机显示屏的devicePixelRatio=或.box{width:00px;height:00px;}
以上代码在设备上绘制一个像素的盒子，(该大小在所有物理设备上看起来都一致)
在devicePixelRatio为1时，真实设备会用个设备像素去渲染它。但是在devicePixelRatio为时，真实设备会用个设备像素去渲染。
对于图片来说，一张照片的大小就是像素，用的设备像素，能保真的显示。而如果使用的设备像素去渲染，就会模糊(*可以理解为被拉伸,被放大)。
因此，引入了倍图，倍图的概念。
也就是同一张图片，做成1倍图，像素是:，做成倍图，像素是.
图片容器css设置为00*00:
//css样式.img{width:00px;height:00px;}
在devicePixelRatio为1的屏幕中,设置的css像素对应的真实物理像素为，引入一倍图，像素刚好是,一个物理像素对应一个图片像素,可以保真显示。
在devicePixelRatio为的屏幕中,css像素任然是,对应的真实物理像素为(width,height),这时候引入二倍图,像素刚好是,*一个物理像素对应一个图片像素,可以保真显示。
使用媒体查询更换图片:
#element{background-image:url(his.png);}
mediaonlyscenand(min-device-pixel-ratio:){#element{background-image:url(hisx.png);}}mediaonlyscenand(min-device-pixel-ratio:){#element{background-image:url(hisx.png);}}参考资料前端不止：Retina屏幕下两倍图什么是三倍图？——移动端尺寸知识入门使用Flexible实现手淘H5页面的终端适配