响应式网页设计不起作用，根据页面宽度只应显示一个div

Question

我正在尝试构建一个页面，其中将根据页面宽度选择 1div。我已经颠倒检查并重新检查了我的整个代码，但看不到找出问题所在。

例如，我们有：12345

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

这里：

<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>

Answer 1

试试这个

.show-box {
    width: 300px;
    height: 300px;
    background: crimson;
    font-size: 80px;
    text-align: center;
    color: #fff;
    line-height: 275px;
    margin: 75px auto;
}
@media only screen and (min-width: 801px) {
    .four, .three, .two, .one {
      display: none;	
    }
}
@media only screen and (max-width: 800px) and (min-width: 621px) {
    .five, .three, .two, .one {
      display: none;	
    }
}
@media only screen and (max-width: 620px) and (min-width: 421px) {
    .five, .four, .two, .one {
      display: none;	
    }
}
@media only screen and (max-width: 420px) and (min-width: 321px) {
    .five, .four, .three, .one {
      display: none;	
    }
}
@media only screen and (max-width: 320px) {
    .five, .four, .three, .two {
      display: none;	
    }
}

<div class="show-box five">5</div>
<div class="show-box four">4</div>
<div class="show-box three">3</div>
<div class="show-box two">2</div>
<div class="show-box one">1</div>

Answer 2

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

以下是使用黑色背景颜色的代码：https://jsfiddle.net/2h41ny05/15/

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