菜单内容不适合移动模式

时间:2016-01-13 16:25:15

标签: css css3 responsive-design

“菜单”位于页脚中。用图片,精灵和文字。当我调整大小并打开网站或通过电话时,菜单不适合。我试图添加一些中等查询,但没有成功。

我希望移动和/或调整屏幕大小,图像,文本和精灵根据视口的大小进行调整。

Link site

如果可能,请将屏幕调整为较小的宽度,打开浏览器控制台或相同的单元格。

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>  

Vejam o conteúdo do menu-faixa amarela. No tablet, perfeito.

Porém, no celular, o conteúdo está desajustado. Não está redimensionado corretamente

我有两个div。主要是背景图像和div组,显然是黄色条纹。在这个div组中,我直接通过标签img和带有精灵和文本的div添加了徽标。我已经尝试了很多方法来修改媒体,但据我所知,只有当你有一些内容时,图像的范围才会出现。单独她没有显示。因此,当我们减小图像大小时,轨道大小也会自动修改。我试图在背景中插入带有徽标的div,也很快就会离开,精灵和隔离的文本div组并没有。我试图以多种不同的方式修改内容的大小,但没有成功/:

1 个答案:

答案 0 :(得分:1)

尝试为@media(max-width:760px)查询两个div(徽标和contato)的不同维度,在此尺寸下,您可以为图像提供一个百分比维度。

尝试删除移动设备上的一些信息(以便更好地适应),并更改字体大小。