我的网站的徽标图片在移动设备上模糊

Question

徽标图像（以及页脚中的任何图像）在移动设备上显得模糊，但在计算机屏幕上看起来不错。 无论如何要解决这个问题？

这是我的html文件：

<div class="logo">
   <a href="/public_html/index.html">
       <img src="images/icon/logo-white.png" alt="Tatee" />
   </a>
</div>

Answer 1

我认为您需要使用徽标div样式，使其与图像的宽度相同。例如，如果徽标尺寸为100px * 50px-在这种情况下，CSS将为

.logo{
  width: 100px;
  height: 50px;
}
.logo img{
  max-width: 100% !important;
}

您可以尝试通过这种方式在移动设备上工作。另外，您可以帮助媒体查询仅在移动设备上使用。

@media (min-width: 320px) and (max-width: 480px) {
  .logo{
    width: 100px;
    height: 50px;
  }
  .logo img{
    max-width: 100% !important;
  }
}