Question

我有以下CSS，但是虽然图像在桌面分辨率上显示@ 60px，但在@media导入下它不会调整为40px。这是我缺少特异性的东西吗？：

@media (max-width: 976px) {
  #navigation .user .dropdown >a img {
  margin-left: 10px;
  height:40px;
 };
}

#navigation .user .dropdown>a img {
    margin-left: 10px;
    height:60px;
}

Answer 1

切换代码的顺序：

#navigation .user .dropdown>a img {
    margin-left: 10px;
    height:60px;
}

@media (max-width: 976px) {
     #navigation .user .dropdown >a img {
         margin-left: 10px;
         height:40px;
     };
}

由于您没有使用@media查询包装“常规”代码，因此在两种情况下都会执行。对于较低宽度的显示，您基本上有height:40px;后跟height:60px; - 它被覆盖了。

Answer 2

#navigation .user .dropdown >a img {与#navigation .user .dropdown>a img {不同。 CSS中的空格可能是某些浏览器中的问题，因为它表示所有后代。查看您的.dropdown >a。同时切换代码的顺序，如下所示：

#navigation .user .dropdown>a img {
  margin-left: 10px;
  height:60px;
}
@media (max-width: 976px) {
  #navigation .user .dropdown>a img {
    margin-left: 10px;
    height:40px;
  }
}

@media特异性中的img height属性

2 个答案: