css - 为博主显示移动设备的 Logo 图像

Question

我在 blogger 上写博客，它有一个响应式模板。当我在电脑上看到博客上的 Logo 时，它看起来不错，但当我转到 iPhone 时，它​​有点模糊，我不知道这是什么原因。 我尝试编辑 Logo 并将其更改为不同的 Logo ，但结果是一样的...

我博客的链接是:www.5minLunchBox.blogspot.com

有没有人知道如何修复它？

谢谢!

Answer 1

您的自然宽度为 220 像素宽度。但是您的移动视口(viewport)宽度超过 320px 到 480px，具体取决于移动设备。更不用说，您使用的是高度像素化的 .jpg 图像。

解决方案

1. 熟悉 .svg 技术。使用 SVG 将允许您在所有宽度下操作图像并利用您的 max-width:100%;。
2. 以这种方式使用更大的图像(不小于 480 像素)，您仍然可以在不损失分辨率的情况下缩小尺寸，并且不需要重新调整尺寸，这是您的问题所在。您正在扩展 .jpg 像素

一旦您添加了更大的 Logo ，希望至少是 .png，但最好是 .svg，请执行以下操作:

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
  .widget iframe, .widget img {
      width:100%;
      max-width: 320px;
  }
}