Question

当您单击菜单按钮打开菜单并缩小窗口时，它看起来很奇怪，特别是在小宽度上。我知道我可以使用媒体查询但不幸的是，当你没有点击菜单按钮并缩小窗口时，我也必须使用媒体查询来解决这种情况。

这导致了两种情况，当单击菜单按钮时没有，这是相当混乱的（由于其复杂性，我真的不想对这两种情况使用媒体查询）。

你有什么想法吗？非常感谢你！

与问题相关的一些代码：
HTML：

.menu-push-right-to-left {
    display: none;
    position: fixed;
    top: 0;
    right: -324px;
    bottom: 0;
    width: 324px;
    transition: right .3s ease-out, visibility .3s ease-out;
    background-color: $black-2;
    &.changeWidth {
      right: 0;
    }
    ul {
      float: none;
    }
    nav li {
      float: none;
      padding: px2em(22px) px2em(27px);
      border-bottom: 1px solid $gray-17;
      &:first-child {
        padding: px2em(13px) px2em(21px) px2em(12px);
        a {
          font-size: px2em(12px);
        }
        img {
          float: left;
        }
        span {
          float: left;
          color: white;
          line-height: inherit;
          margin: px2em(10px, 12px) 0 0 px2em(7px, 12px);
        }
      }
      a {
        color: white;
        padding: 0 0 0;
      }
    }
    ul.block-social {
      margin: px2em(29px) 0 0;
      li {
        float: none;
        display: inline-block;
        margin: 0 0 0 px2em(40px);
        vertical-align: bottom;
        span {
          color: $white-4;
          &.qa-social-facebook {
            font-size: px2em(21px, 15px);
            line-height: px2em(20px, 21px);
          }
          &.qa-social-linkedin {
            font-size: px2em(18px, 15px);
          }
          &.qa-social-google {
            font-size: px2em(19px, 15px);
          }
        }
      }
    }
    .block-contact {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0 px2em(32px) px2em(27px);
      h4 {
        font-size: inherit;
        line-height: inherit;
        a {
          color: white;
          font-size: px2em(12px);
          line-height: px2em(24px, 12px);
        }
      }
      p {
        color: $gray-9;
        font-size: px2em(12px);
        line-height: px2em(24px, 12px);
        a {
          color: $gray-9;
        }
      }
    }
  } // end .menu-push-right-to-left

SCSS：

<?php
$date = ["2015-11-17","2015-11-17","2015-11-18","2015-11-20","2015-11-23"];
$departmeent = ["1","3","1","1","2"];
$percentage = ["0.5700","0.0000","0.5700","0.0000","0.5700"];
$array = array();

for($i=0; $i<5;$i++)
{
    if(array_key_exists($date[$i], $array))
    {
        $array[$date[$i]]['department'.$departmeent[$i]]= $departmeent[$i];
        $array[$date[$i]]['per'.$departmeent[$i]]= $percentage[$i];

    }
    else
    {

        $array[$date[$i]] = array('department'.$departmeent[$i] => $departmeent[$i],
                    'per'.$departmeent[$i] => $percentage[$i]) ;
    }   

}

echo var_dump($array["2015-11-17"]["department1"]);

echo '<br><br><br><br><br><br>'.json_encode($array);
?>

Answer 1

使用此

@media your max width here {

   .menu-push-right-to-left {
    left:0;
    right: 0;
    bottom: auto;
    width: auto;
    height:0
    transition: height .3s ease-out, visibility .3s ease-out;

        &.changeWidth {
            height:auto;
        }
   }
}

Answer 2

媒体查询确实是唯一的答案。至于点击然后调整大小需要jquery观看 - 在Chrome中做这个有点棘手，但我认为你已经过度复杂了。没有人真正调整浏览器的大小，所以不需要手表。只需为较小的设备添加一个查询（当然，您可以添加更多，也可以说是方向。）。

希望这会有所帮助 - 只是不要过度思考用户可以做什么，因为如果他们打开菜单然后改变他们的屏幕，看起来很奇怪他们会在现实中恢复他们的行动。

CSS - 在响应状态下从右向左推送菜单

2 个答案: