Question

我正在尝试构建一个页面，根据页面宽度选择1 div。我已经检查并重新检查了我的整个代码，并且无法找出问题所在。

例如，我们有： 1 2 3 4 5

如果页面宽度超过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;
    }

响应式Web设计无法在根据页面宽度仅显示一个div的情况下工作

2 个答案: