切图文件中@1px,@2px,@3px三个文件的区别

        在平常开发过程中，下载切图会发现，有三个文件，分别是@1px,@2px,@3px，之前可能不明白为什么要有三个文件，要用哪个呢

        经过查询资料发现，这里面就涉及到dpr的问题了。

 

        在说dpr之前，确保知道两个概念，设备像素和css像素。

                设备像素：就是设备屏幕的物理像素，任何设备的物理像素都是固定的，是显示器（手机屏幕）上最小的物理显示单元。

                css像素：又称为逻辑像素，也就是我们平常编码过程中，css和js写的px

        dpr就是在默认缩放比例100%的情况下，设备像素(物理像素)/css像素(逻辑像素)

 

        由于设备上的物理像素各有不同，所以导致dpr也不相同，所以针对10*10 的图片，在1dpr的设备上和2dpr的设备上清晰度肯定是不一样的。

        所以会有三个文件，分别是@1px文件，扩大1倍的@2px文件，及扩大1.5倍的@3px文件

 

        如果针对移动端开发，并且要求严格适配的话，需要在代码里判断设备的dpr来加载不同像素的文件。

        一般日常开发过程中，一般默认使用@2px文件，既保证了清晰度，文件大小也ok。