Media Query无法调整图片位置？求助排查代码问题

你的Media Query不生效是因为CSS代码里存在语法错误——把属性之间的分隔符分号（;）写成了冒号（:），浏览器无法正确解析样式规则，自然不会应用媒体查询内的样式。

修正后的代码 #

.bg {
  position: absolute;
  top: 100px;
  left: 10px;
}

@media screen and (min-width: 776px) {
  .bg {
    position: absolute;
    top: 10px;
    left: 5px;
  }
}

额外注意事项 #

• 确保HTML头部包含viewport元标签，否则移动端的媒体查询可能无法正常触发：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 检查是否有其他更高优先级的CSS规则（比如带!important的样式、更具体的选择器）覆盖了.bg的属性。

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