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

Question

我是媒体查询的新手，我看了一些有关最佳做法的教程，但看来我无法工作。

我创建了一个简单的文本div来确保它甚至可以正常工作，并且尝试将div的background-color更改为蓝色，一旦浏览器的width小于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> 

这是我的演示

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>