代码之家 › 专栏 › 技术社区 › user9459537

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

responsiveness responsive responsive-design css

1

user9459537 · 技术社区 · 7 年前

我正在尝试构建一个页面,其中将根据页面宽度选择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>

2 回复 | 直到 7 年前

1

Anzil khaN 7 年前

试试这个

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

2

0

Jorge Altieri 7 年前

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

以下是使用黑色背景色的代码: 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;
    }