为什么png小图标在移动端中显示异常模糊呢？

Question

为什么png小图标在移动端中显示异常模糊呢？

Answer 1

因为移动端是Retina屏幕呀！
假设图标icon.png是16x16, 设备是2x的Retina屏，那么你得准备一个[e-mail]，分辨率是32x32，这么写CSS：

.icon {
  background-image: url(images/icon.png);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
  .icon {
    background-image: url(images/[e-mail]);
    background-size: 16px 16px;
  }

如果是用<img>，可以这样写：

<img src="images/icon.png" srcset="images/[e-mail] 2x">

当然iPhone 6 Plus和iPhone 6S Plus是3x的Retina屏，如果要兼容，就要更多图啦

Answer 2

是不是设置了固定宽高

Answer 3

是这样的，其实特别简单，在开发环境pc端72（分辨率）PPI下。
如果你要放一个16x16px的icon，并让其清晰的显示在移动端
保险起见你可以做成64x64px的画布大小，这样几乎所有ui分辨率都可以很清晰显示，
但是需要在html里进行设置图片宽高为16x16px，因为默认直接显示画布大小：

书写1：

<img class="img1" style="width: 16px;height: 16px;" src="images/64x64PX.png"/>

书写2：

<img class="img1" width="16px" height="16px" src="images/64x64PX.png"/>

书写3：
.img1{width: 16px;height: 16px;}
<img class="img1" src="images/64x64PX.png"/>
至于为什么，你试了就明白：