Question

我是媒体查询的新手，我已经看过一些关于最佳做法的教程，但似乎我不能让我的工作......

我创建了一个简单的文本div以确保它甚至可以正常工作，并且当浏览器的background-color小于时，我尝试将div的width更改为蓝色500px。

有人知道我错过了什么吗？

＆＃13;

#text_box {
  height: 100px;
  width: 100px;
  background-color: red;
}
@media screen and (max-width: 500px) {
  #test_box {
    height: 100px;
    width: 100px;
    background-color: blue;
  }
}

＆＃13;

<div id="text_box">Test</div>

＆＃13;

这是我的demo

Answer 1

您的id媒体查询中有拼写错误，它不是test_box，而是text_box。

此外，如果它们具有相同的值，则无需重复之前已设置的属性。

#text_box {
  height: 100px;
  width: 100px;
  background-color: red;
}
@media screen and (max-width: 500px) {
  #text_box {
    background-color: blue;
  }
}

<div id="text_box">Test</div>

CSS - 媒体查询无法正常工作

1 个答案: