在移动设备上拉伸的图标

Question

我在移动设备上遇到了一些图标（它们是锚链接）的问题。如果我在桌面版本上使用谷歌切换栏，一切看起来都很好，当我在智能手机上浏览页面时，图标看起来有点拉伸。

css 可能存在一些问题，但我无法找到问题所在。我已经尝试过多次更改高度和宽度，但它似乎不起作用。有人知道吗？

这是html：

<a href="#"><img id="icon" style="max-width:100%" "max-height: 100%"></a>

这是 CSS 和媒体查询：

@media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100%;
max-height:100%;
}

Answer 1

在这里你犯了 1 个 html 错误、1 个 CSS 错误和 1 个你不知道的 CSS 优先级。但是您还应该共享您的 a 元素的容器。

HTML 错误

你写道：style="max-width:100%" "max-height: 100%"

<a href="#"><img id="icon" style="max-width:100%" "max-height: 100%"></a>

但" 用于打开或关闭属性。因此，按照您编写的方式，将永远不会采用最大高度，因为样式已关闭最大宽度。你应该这样写：

<a href="#"><img id="icon" style="max-width:100%; max-height: 100%;"></a>

CSS 错误

根据您的 CSS 代码，媒体查询未关闭。但它应该。

@media only screen and (min-width: 300px) and (max-width:650px) {
   #icon {
    max-width:100%;
    max-height:100%;
  }
}

优先级

当你设置style属性内联（直接在html中）时，它优先于css设置。除非您在 css 后添加 !important。

所以要解决您的问题，您有 2 个解决方案。 sn-p 不会显示任何内容，因为我没有您的图标。不过是为了把代码显示清楚。

内联 CSS 的第一个解决方案：

@media only screen and (min-width: 300px) and (max-width:650px) {
  #icon {
    max-width:100% !important;
    max-height:100% !important;
  }
}

<a href="#"><img id="icon" style="max-width:100%; max-height: 100%;"></a>

解决方案 2，一切都在 css 中：

#icon {
  max-width:100%;
  max-height:100%;
}
@media only screen and (min-width: 300px) and (max-width:650px) {
  #icon {
    max-width:100%;
    max-height:100%;
  }
}

<a href="#"><img id="icon"></a>

但是这段代码没有任何意义，因为无论屏幕宽度如何，您都试图应用相同的最大宽度和最大高度，根据您分享的内容，它应该是这样的：

#icon {
  max-width:100%;
  max-height:100%;
}

<a href="#"><img id="icon"></a>