CSS

Question

我是媒体查询的新手，我看过一些关于最佳实践的教程，但我似乎无法正常工作..

我创建了一个简单的文本 div 以确保它能正常工作，并且我试图在 [=14] 之后将 div 的 background-color 更改为蓝色=]的浏览器小于500px。

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

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

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

这是我的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 - 媒体查询无法正常工作

CSS - Media Queries not working properly

html

media-queries

responsive-design