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>