IE浏览器图片无法居中以及手机端图片模糊的处理

IE浏览器图片无法居中问题

我们在使用display：flex，调整图片居中的时候，一般在谷歌、火狐都没啥问题，不论是放大、缩小都可以适配，但是，在IE浏览器中，当我们的图片大于缩放的宽度时，图片便不会居中显示，效果如图：

后来发现是由于没有设置flex-direction：column，设置之后效果：

手机端图片模糊的处理

PC端与手机端对于图片的要求不一样，像一般做过安卓或ios开发的人都知道，图标的图片一般分为1@x.png、2@x.png，不同的分辨率下引用的图片不一样。
手机如果遇到图标不清楚，是由于将图片放到了2倍所以，变得超级的模糊。此时，我们需要根据屏幕的分辨来做一个判断，引用@2X.png，并且，background-size设置为跟@1.png的大小一直。