大约 600 像素宽度的不当行为？

Question

my site 在最小宽度下发生了什么，我该如何解决？

问题

在手机和全屏上看起来不错，但是当缩小尺寸时，我的背景图片消失了，顶部栏在大约 600 像素左右看起来很奇怪（徽标在做一些疯狂的事情）。

我的@media query 代码：

@media only screen and (min-width:1024px)
{
  div.large-7.push-5.columns.last{
  height: emCalc(1px);
}
}
@media only screen and (max-width: 1023px) and (min-width:675 px){ //745 //481
  .top-bar .toggle-topbar.menu-icon a {
    color: $steel;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;

}
.container{
  /*background: linear-gradient(to bottom, yellow, magenta);*/
  height: 66rem; /*645px*/
  //overflow: hidden;
  background-image: url('/img/losang.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  }
.top-bar{
 // overflow: hidden;
}
  .top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 5px;
    top: 0;
    width: 16px;

}
}

@media only screen and (max-width: 674px) { //480
//   .title-area { 
//   max-width: 40%; //or whatever you need for your layout. px will work there, too
// }
// .title-area .logo {
//   width: 100%;
//   height: auto;
// }
 #icons .hover1 {
    .iconlinks {
        color:$iconcolor1;
    }
    
}
#icons .hover2 {
    .iconlinks {
        color:$iconcolor2;
    }
    
}
#icons .hover3 {
    .iconlinks {
        color:$iconcolor3;
    }
    
}



.path-container .path-item .circle.circle-right {
  
  right: 90px;
}

.path-container {
    text-align: center;
  }


  .path-container .circle {
    top: 0;
    // right: 0;
    // left: 0;
    float: none;
    margin-bottom: 30px !important;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
  }
  .top-bar .toggle-topbar.menu-icon a {
    color: $steel;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}
    .top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 5px;
    top: 0;
    width: 16px;
}

.top-bar {
    overflow: hidden;

}
.orbit-container{
  height: 12.5rem;
}
.container{
    /*background: linear-gradient(to bottom, yellow, magenta);*/
    height: 66rem; /*645px*/
    overflow: hidden;
    background-image: url('/img/losang.jpg');
    background-size: 100%;
    background-repeat: no-repeat;

    /*background-color: #ccc;

.container{
    /*background: linear-gradient(to bottom, yellow, magenta);*/
    //height: 65rem; /*645px*/
    // background-color: blue;
}
.servicesminicontainer{
margin-top:emCalc(0px);
}
.serviceimgs{
  margin: emCalc(0px) auto;

}
.servicescontainer{
  /*background: linear-gradient(to bottom, yellow, magenta);*/
  // height:40rem; /*645px*/
  overflow: hidden;
  background: none;
  /*background-image: url('../img/laback.jpg');*/
  background-size: 100%;
  //background-repeat: no-repeat;
  // background-color: rgba(30,144,255, .7)
  //background: linear-gradient(to bottom, $background-color-top, white);
  //background-image: url('../img/losang.jpg');
}

#icons{
  position: relative;
top: initial;
margin-top: 50px
}
.logo{
    width: 50%;
  // position:relative;
  // top:emCalc(-27px);
}
#topbutton{
    position: relative;
top: 2rem;
}
#icons{
    /*position: relative;
    top:6rem;*/
}


   .container1 p, h4{
    color:black;
}
  header{
    margin-top: 0rem;
    background-image: none;
  
        }

      }

Answer 1

我不确定尝试以下样式。希望它能解决顶部标题问题。

@media only screen and(min-width:500px) and (max-width: 600px)
{
.top-bar .name
 {
  height:auto;
 }
.top-bar
 {
  height:5rem;
 }
}