html - 调整所有 DIV 内容的大小

Question

我用 HTML/CSS 创建了这个面板，我想做点什么。当一个人使用平板电脑时，整个内容都会调整大小，就像图像一样(“宽度:100%”)。我想调整图像和文本的大小。

我做错了什么？通过这种方式，文本和图像保持在彼此之上。

JSfiddle 链接:https://jsfiddle.net/z5ygfx3n/8/

有一个div元素内容的示例:

<div class="bloco-dolar-americano" style="position: absolute; left: 25%; top: 4%; width: 379px; height: 243px; background: NONE; display: block;">ALL CONTENT</div>

谢谢

Answer 1

首先你需要阅读关于media query的内容.

我有一个创建片段，请查看如何使用组类 [class*=bloco-dolar-]

希望这对您有所帮助。

让我知道进一步的说明。

注意: 我在媒体查询中设置了 max-991 和 min-768 的 css，所以请检查这个大小。

  @media only screen and (min-width: 768px) and (max-width: 991px){
    .cotacao-responsiva{
  color: white;
  font-family: arial;


  font-size: 18px;
}

body{
  background: black;
  
}


div[class*=bloco-dolar-] {
    position: unset !important;
    width: 100% !important;
    max-width: 320px;
    margin-bottom: 3%;
    text-align: center;
    display: inline-block !important;
    height: auto !important;
    margin-bottom: 50px;
}
div[class*=bloco-dolar-] .cotacao-pais {
    width: 100%;
    clear: both;
}
div[class*=bloco-dolar-] .cotacao-pais img {
    width: 100%;
    height: auto;
        margin: 0 !important;
}
div[class*=bloco-dolar-] .cotacao-texto {
    width: 100%;
    float: left;
    clear: both;
}
div[class*=bloco-dolar-] .cotacao-texto br {
    display: none;
}
.cotacao-responsiva{text-align: center;}
}

<div class="cotacao-responsiva" style="position: relative; width:100%; height: 1000px; background: none;">

<div class="bloco-dolar-americano" style="position: absolute; left: 25%; top: 4%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left;le "><div style="margin-bottom:5px"><b>DOLAR AMERICANO</b></div><br/><img width= "80%" class="aligncenter size-full" style="margin-left: 12px" src="http://www.axbrcambio.com.br/baloes/balao-eua.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>

 <div class="bloco-dolar-americano" style="position: absolute; left: 55%; top: 4%;width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>EURO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-euro.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 5%; top: 15%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR CANADENSE</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-canadai.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 23%; top: 38%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>LIBRA</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-libra.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 40%; top: 30%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR AUSTRALIANO</b></div><br/><img style="margin-left:30px" width= "50%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-aus.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 63%; top: 30%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR NEOZEOLANDÊS</b></div><br/><img style="margin-left: 50px" width= "50%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-neo.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 43%; top: 56%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO URUGUAIO</b></div><br/><img width= "70%" class="aligncenter size-full" style="margin-left: 10px" src="http://www.axbrcambio.com.br/baloes/balao-peso-uruguai.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 5%; top: 48%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO ARGENTINO</b></div><br/><img width= "60%" class="aligncenter size-full" style="margin-left: 20px" src="http://www.axbrcambio.com.br/baloes/balao-peso-arg.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 26%; top: 64%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO CHILENO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-peso-chile.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 6%; top: 75%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO COLOMBIANO</b></div><br/><img width= "60%" class="aligncenter size-full" style="margin-left: 30px" src="http://www.axbrcambio.com.br/baloes//balao-peso-colombia.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 65%; top: 55%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO MEXICANO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-peso-mexico.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 28%; top: 88%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>FRANCO SUIÇO</b></div><br/><img width= "70%" class="aligncenter size-full" style="margin-left:15px" src="http://www.axbrcambio.com.br/baloes/balao-franco-sui.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 47%; top: 85%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>IENE</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-iene.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 67%; top: 84%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>SOL PERUANO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-sol-peru.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
  </div>