Css 响应性网页设计不适用于根据页面宽度仅显示一个div的情况

我正在尝试构建一个页面，其中将根据页面宽度选择1个div。我检查了一遍又一遍，从上到下检查了我的整个代码，看不出哪里出了问题

例如，我们有： 1. 2. 3. 4. 五,

如果页面宽度超过800像素，则只显示div 5。 如果页面宽度为320像素，它将显示div 1，如果宽度为480像素，则显示div 2，依此类推

在这里：

body{margin:0；颜色：#FFFFFF；字体大小：大；}
/*  */
@媒体屏幕和屏幕（最大宽度：324px）{
#graficorelatorio1{
溢出：隐藏；
宽度：254px；
高度：153px；
明确：两者皆有；
左边距：自动；
右边距：自动；
边缘底部：1rem；
页边顶部：1rem；
}
#graficorelatorio2、#graficorelatorio3、#graficorelatorio4、#graficorelatorio5{显示：无；
}   
}
/*  */
@媒体屏幕和（最大宽度：490px）和（最小宽度：325px）{
#graficorelatorio2{
溢出：隐藏；
宽度：324px；
高度：194px；
明确：两者皆有；
左边距：自动；
右边距：自动；
边缘底部：1rem；
页边顶部：1rem；
}
#graficorelatorio1、#graficorelatorio3、#graficorelatorio4、#graficorelatorio5{显示：无；
}   
}   
/*  */
@媒体屏幕和（最大宽度：624px）和（最小宽度：491px）{
#graficorelatorio3{
溢出：隐藏；
宽度：483px；
高度：228px；
明确：两者皆有；
左边距：自动；
右边距：自动；
边缘底部：1rem；
页边顶部：1rem；
}
#graficorelatorio1、#graficorelatorio2、#graficorelatorio4、#graficorelatorio5{显示：无；
}   
}   
/**/@媒体屏幕和（最大宽度：839px）和（最小宽度：625px）{
#graficorelatorio4{
溢出：隐藏；
宽度：624px；
高度：289px；
明确：两者皆有；
左边距：自动；
右边距：自动；
边缘底部：1rem；
页边顶部：1rem；
}
#graficorelatorio1、#graficorelatorio2、#graficorelatorio3、#graficorelatorio5{显示：无；
}   
}   
/**/
@媒体屏幕和（最小宽度：840px）{
#graficorelatorio5{
溢出：隐藏；
宽度：841px；
高度：321px；
明确：两者皆有；
左边距：自动；
右边距：自动；
边缘底部：1rem；
页边顶部：1rem；
}
#graficorelatorio1、#graficorelatorio2、#graficorelatorio3、#graficorelatorio4{显示：无；
}   
}       
#维护关系{
背景色：#134F5C；
溢出：隐藏；
填充：0；
保证金：0；
显示：块；
}
1.
2.
3.
4.
5.

它正在工作，但您看不到它，因为数字是白色的，背景是白色的

以下是使用黑色背景色的代码：

---

试试这个

。显示框{
宽度：300px；
高度：300px；
背景：深红色；
字号：80px；
文本对齐：居中；
颜色：#fff；
线高：275px；
利润率：75px自动；
}
@仅介质屏幕和（最小宽度：801px）{
.4、.3、.2、.1{
显示：无；
}
}
@仅介质屏幕和（最大宽度：800px）和（最小宽度：621px）{
.5、.3、.2、.1{
显示：无；
}
}
@仅介质屏幕和（最大宽度：620px）和（最小宽度：421px）{
.5、.4、.2、.1{
显示：无；
}
}
@仅介质屏幕和（最大宽度：420px）和（最小宽度：321px）{
.5、.4、.3、.1{
显示：无；
}
}
@仅介质屏幕和（最大宽度：320px）{
.5、.4、.3、.2{
显示：无；
}
}

5
4.
3.
2.
1

哦，对不起，我确实看到了，但是我忘了粘贴代码中负责背景的部分。我会更新问题的。伙计，你说唯一错误的是背景。好吧，我把负责背景的部分放在问题中。然后我测试了旧（我的）和新（你的）代码，我的代码不工作。除了背景色，你没有改变什么吗？还有那个额外的“和”，我把它去掉了。还是一样。我已经添加了“mainrelatorio”分区，并且仍在工作。再次检查小提琴。什么不适合你？这些数字在“graficorelatorio”分区内。找到了。这是一个浏览器问题。使用铬。我用Firefox进行了测试，它成功了。这很有趣，因为当我测试你的小提琴时，它是有效的。已经清除了缓存。这是我来这里之前的第一次。糟透了，问题出在我的浏览器上。

<style> body { margin:0; color:#FFFFFF; font-size:large; } 


/*  */
@media screen and (max-width: 324px) {
#graficorelatorio1 {
         overflow: hidden;
         width: 254px;
         height: 153px;
         clear:both;
         margin-left: auto;
         margin-right: auto;
         margin-bottom:1rem;
         margin-top:1rem;
    }
#graficorelatorio2, #graficorelatorio3, #graficorelatorio4, #graficorelatorio5 { display:none;
    }   
}
/*  */
@media screen and (max-width: 490px) and (min-width: 325px){    

#graficorelatorio2 {
         overflow: hidden;
         width: 324px;
         height: 194px;
         clear:both;
         margin-left: auto;
         margin-right: auto;
         margin-bottom:1rem;
         margin-top:1rem;
    }
#graficorelatorio1, #graficorelatorio3, #graficorelatorio4, #graficorelatorio5 { display:none;
    }   

}   
/*  */
@media screen and (max-width: 624px) and (min-width: 491px) {   
#graficorelatorio3 {
         overflow: hidden;
         width: 483px;
         height: 228px;
         clear:both;
         margin-left: auto;
         margin-right: auto;
         margin-bottom:1rem;
         margin-top:1rem;
}
#graficorelatorio1, #graficorelatorio2, #graficorelatorio4, #graficorelatorio5 { display:none;
    }   

}   
/* */@media screen and (max-width:839px) and (min-width: 625px) {
#graficorelatorio4 {
         overflow: hidden;
         width: 624px;
         height: 289px;
         clear:both;
         margin-left: auto;
         margin-right: auto;
         margin-bottom:1rem;
         margin-top:1rem;
}
#graficorelatorio1, #graficorelatorio2, #graficorelatorio3, #graficorelatorio5 { display:none;
    }   

}   

/**/
@media screen and and (min-width: 840px) {  
 #graficorelatorio5 {
         overflow: hidden;
         width: 841px;
         height: 321px;
         clear:both;
         margin-left: auto;
         margin-right: auto;
         margin-bottom:1rem;
         margin-top:1rem;
}
#graficorelatorio1, #graficorelatorio2, #graficorelatorio3, #graficorelatorio4 { display:none;
    }   
}       


 #mainrelatorio {
         background-color: #134F5C;
         overflow:hidden;
         padding:0;
         margin:0;
         display:block;
    }




</style>


<div id="mainrelatorio">


<!-- width="254" height="152.3110834864699" -->
<div id="graficorelatorio1">
1
</div>

<!-- width="323.0698621553885" height="193.6110834864699" -->
<div id="graficorelatorio2">
2
</div>

<!--  width="483" height="227.67577137343096"-->
<div id="graficorelatorio3">
 3
</div>

<!-- width="623.5" height="288.84898929845417"-->
<div id="graficorelatorio4">
  4
</div>

<!-- 841" height="321" -->
<div id="graficorelatorio5">
   5
</div>



</div>

#graficorelatorio1 {
         overflow: hidden;
         width: 254px;
         height: 153px;
         clear:both;
         margin-left: auto;
         margin-right: auto;
         margin-bottom:1rem;
         margin-top:1rem;
         background-color: black;
    }