@media (max-width 680px)不符合预期：屏幕<580px时图片未居中适配

1. 修正媒体查询语法错误 #

你写的媒体查询存在语法问题，缺少冒号，且目标宽度和需求不符，正确写法应为：

@media (max-width: 580px) {
  /* 移动端适配样式 */
}

浏览器无法识别max-width 680px这类写法，且你需要的是屏幕宽度小于580px时触发规则，所以要把数值调整为580px。

2. 实现图片居中+适配屏幕 #

在修正后的媒体查询内添加以下样式，就能让图片和文本适配屏幕并居中：

@media (max-width: 580px) {
  /* 统一文本和图片容器的适配规则 */
  .你的内容容器类名 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px; /* 避免内容贴屏幕边缘 */
  }

  /* 图片适配与居中 */
  img {
    display: block; /* 行内元素无法用margin:auto居中，改为块级元素 */
    width: 100%;
    max-width: 100%; /* 图片宽度不超过容器，同时不放大原始尺寸 */
    margin: 0 auto; /* 水平居中 */
    height: auto; /* 保持图片比例，防止拉伸变形 */
  }
}

3. 排查样式冲突 #

如果图片仍有偏移，检查图片或其容器是否设置了float、position: absolute这类属性，这些会破坏居中逻辑，需要在媒体查询内重置：

@media (max-width: 580px) {
  .你的图片容器类名 {
    float: none;
    position: static;
  }
}

内容的提问来源于stack exchange，提问作者Kate