Question

我用HTML / CSS创建了这个面板，我想做点什么。当人使用平板电脑时，整个内容的大小都会像图像一样（“宽度：100％”）。我想调整图片和文字的大小。

我在做什么错？这样，文本和图像就可以彼此重叠。

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

有一个div元素内容示例：

gocache

谢谢

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>

调整所有DIV内容的大小

1 个答案: