嗨，我想知道为什么当我尝试更改移动设备媒体查询中的宽度和高度时无法更改 <div .card> 的大小（375px）

Question

这是我的第一个问题，我是这个领域的新手，如果有任何错误，请原谅我。您好，我想知道为什么当我尝试更改移动媒体查询中的宽度和高度（375px）时，我无法更改

的大小。

```
/* Color */
/* Fonts */
/* Font-size paragraph */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Add mixin Media Queries */




@media screen and (max-width: 375px) {
body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
body .card {
    display: flex;
    flex-direction: column;
    border: 2px solid red;
    width: 342px;      // THIS LINE DOESN'T CHANGE
    height: 600px;     // THIS LINE DOESN'T CHANGE
  }
body .card .image .foto {
    height: 242px;
    width: 342px;
    border: 1px solid;
    margin: 0 auto;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    object-fit: cover top;
  }
body .card .title {
    width: 342px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;
    padding-bottom: 200px;
    bottom: -300px;
  }
body .card .title .titolo {
    width: 270px;
  }
body .card .title .titolo .text .capo {
    width: 275px;
  }
}
body {
    height: 100vh;
    width: 100%;
    background-color: hwb(32 89% 5%);
}
body .card {
    height: 404px;
    width: 550px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 10px;
    display: flex;
}
body .image {
    width: 275px;
    height: 404px;
}
body .image .foto {
    width: 275px;
    height: 404px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    object-fit: cover;
}
body .title {
    width: 275px;
    height: 404px;
    background-color: white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
body .title--up {
  color: rgba(149, 149, 149, 0.9);
  position: relative;
  top: 24px;
  left: 27px;
  font-family: montserrat, "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 5px;
}
body .title .titolo {
  position: relative;
  top: 40px;
  font-family: fraunces;
  color: hsl(212, 21%, 14%);
  font-size: 29px;
  left: 27px;
  line-height: 29px;
  width: 200px;
}
body .title .text {
    position: relative;
    left: 27px;
    color: rgba(149, 149, 149, 0.9);
    font-size: 13px;
    font-family: montserrat;
    top: 60px;
    font-weight: 500;
    line-height: 22px;
}
body .title .text .capo {
  width: 208px;
}
body .title .text .price {
  position: relative;
    color: hsl(158, 36%, 37%);
  font-size: 30px;
  font-family: fraunces;
  top: 28px;
}
body .title .text .old_price {
  position: relative;
  top: 23px;
  left: 17px;
}
body .title .text .btn {
  position: relative;
  top: 55px;
  background-color: hsl(158, 36%, 37%);
  border: 0;
  border-radius: 7px;
  width: 220px;
  height: 42px;
  color: white;
}
body .title .text .btn:active {
  cursor: pointer;
}
body .title .text .btn .add {
  position: relative;
  left: 10px;
  font-family: montserrat;
  font-weight: 600;
  bottom: 2px;
}
body .title .text .btn .carrello {
  transform: scale(90%);
}/*# sourceMappingURL=styles.css.map */
```

我想更改移动设备媒体查询中 div.card 的宽度和高度（宽度：375px；

我正在尝试更改媒体查询移动设备中 div.card 的大小（-sm ）

如果宽度和高度值未按预期更改，可能是因为这些值被媒体查询外部定义的其他 CSS 规则覆盖，或者 CSS 文件中的其他位置可能存在冲突规则。确保没有其他 CSS 规则以更高的特异性针对 .card 元素并覆盖这些值。具有较高特异性的 CSS 规则优先。有时，由于浏览器缓存的原因，对 CSS 样式的更改可能不会立即反映在您的浏览器中。尝试清除浏览器缓存或使用“硬刷新”(Ctrl + F5) 查看更改是否生效。 我只检查了 body 和 body .card 元素，它在我的计算机上运行良好。

Answer 1

如果宽度和高度值未按预期更改，可能是因为这些值被媒体查询外部定义的其他 CSS 规则覆盖，或者 CSS 文件中的其他位置可能存在冲突规则。确保没有其他 CSS 规则以更高的特异性针对 .card 元素并覆盖这些值。具有较高特异性的 CSS 规则优先。有时，由于浏览器缓存的原因，对 CSS 样式的更改可能不会立即反映在您的浏览器中。尝试清除浏览器缓存或使用“硬刷新”(Ctrl + F5) 查看更改是否生效。 我只检查了 body 和 body .card 元素，它在我的计算机上运行良好。