“菜单”位于页脚中。用图片,精灵和文字。当我调整大小并打开网站或通过电话时,菜单不适合。我试图添加一些中等查询,但没有成功。
我希望移动和/或调整屏幕大小,图像,文本和精灵根据视口的大小进行调整。
如果可能,请将屏幕调整为较小的宽度,打开浏览器控制台或相同的单元格。
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
ul, li{
margin: 0;
padding: 0;
}
h2{
font-family: 'Open Sans Condensed', sans-serif !important;
color: black !important;
font-size: 30px !important;
line-height: 15px !important;
}
#principal {
width: 100%;
height: 100%;
background-image: url('../images/background.jpg');
position: absolute;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#faixa{
position: absolute;
width: 100%;
background-image: url('../images/faixa2.png');
background-repeat: no-repeat;
bottom: 0;
}
#img-logo{
margin-left: 35%;
display: inline-block;
text-align: center;
}
#contato{
position: absolute;
margin-left: 20px;
display: inline-block;
height:auto;
text-align: center;
}
@media(max-width:1050px){
#img-logo{
margin-left: 20%;
}
}
@media(max-width:760px){
#img-logo{
margin-left: 10%;
}
}
@media(max-width:635px){
#img-logo{
margin-left: 5%;
}
}
@media(max-width:580px){
#img-logo{
margin-left: 0;
}
}
@media(max-width:551px){
/* #logo{
width: 20%;
}*/
/* }
#img-logo{
width: 50%;
height: 25%;
}*/
}
HTML:
<div id="principal">
<div id="faixa">
<img src="images/logo4.png" id="img-logo" class="img-responsive">
<div id="contato">
<ul>
<li><a href="" target="_blank" class="img_sprite1"></a></li>
<li><a href="" target="_blank" class="img_sprite2"></a></li>
<li><a href="" target="_blank" class="img_sprite3"></a></li>
</ul>
<h2> (44) 4444-4444 <br><br> <span style="font-size: 18px"> Av. blablabal, 2323 - fer ie jeo <br> cidade - país</span> </h2>
</div>
</div>
</div>
我有两个div。主要是背景图像和div组,显然是黄色条纹。在这个div组中,我直接通过标签img和带有精灵和文本的div添加了徽标。我已经尝试了很多方法来修改媒体,但据我所知,只有当你有一些内容时,图像的范围才会出现。单独她没有显示。因此,当我们减小图像大小时,轨道大小也会自动修改。我试图在背景中插入带有徽标的div,也很快就会离开,精灵和隔离的文本div组并没有。我试图以多种不同的方式修改内容的大小,但没有成功/:
答案 0 :(得分:1)
尝试为@media(max-width:760px)查询两个div(徽标和contato)的不同维度,在此尺寸下,您可以为图像提供一个百分比维度。
尝试删除移动设备上的一些信息(以便更好地适应),并更改字体大小。