使用@media适配宽度<678px设备时，.contact宽度无法修改

核心问题1：媒体查询范围不匹配 #

你需求是针对宽度小于678px的设备，但当前代码里的媒体查询写的是@media (max-width: 400px)，只有屏幕宽度≤400px时才会触发这个规则，和需求不符。先把媒体查询的宽度改成678px：

@media (max-width: 678px) {
  /* 你的响应式样式 */
}

核心问题2：CSS优先级导致样式被覆盖 #

当前你的媒体查询块写在默认.contact样式的前面，而相同权重的CSS选择器，后面定义的样式会覆盖前面的。也就是说，默认的.contact { width:150px; }因为在媒体查询之后，会覆盖媒体查询里的.contact { width:100px; }。

解决方法很简单：把整个@media (max-width: 678px)块移动到CSS文件的最末尾，让媒体查询里的样式优先级更高。

修正后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
html {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url(cursor.png), pointer;
  background: url("ohmygod.png");
  background-size: 100vmax;
  font-family: "Inter";
  color: white;
}

.glass {
  background-color: rgba(255, 255, 255, .3);
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 15px;
  height: 320px;
  width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  filter: drop-shadow(0 0 5rem black);
}

img {
  width: 200px;
}

#contacts {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 33%, 33%, 33%;
  column-gap: 10px;
  row-gap: 10px;
}

.contact {
  padding: 1px;
  background: rgba(255, 255, 255, .2);
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 15px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
}

.icons {
  width: 20px;
  padding-right: 20px;
}

#replit {
  filter: hue-rotate(360deg);
}

.link {
  text-decoration: none;
}

a {
  text-decoration: none;
}

/* 媒体查询移到文件末尾，确保优先级 */
@media (max-width: 678px) {
  .glass {
    height: 550px;
    width: 100%;
    flex-direction: column;
  }
  #contacts {
    column-gap: 5px;
    row-gap: 5px;
  }
  .contact {
    width: 100px;
  }
}

另外可以优化代码：媒体查询里删掉和默认样式重复的内容（比如html的整段样式），只保留需要修改的属性，减少冗余。

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