Question

我的前端设计仍然相对较新，所以我不确定导致这种情况的原因。这是我的第三个投资组合网站，问题也发生在我的第二个网站上。

当视口宽度达到480px时，我使用jQuery交换两个div的位置

HTML：

  <div id="multipleBoxesHeadliner">
                        <div id="multipleBoxesHeadlinerText"><h4>APHEX TWIN<span class="glyphicon glyphicon-asterisk"></span><br>
                                FIELD DAY 2017 HEADLINER</h4>
                        </div>
                        <p>28/11/2016</p>  
  </div>
  <div id="multipleBoxesHeadlinerPic"></div>

CSS：

      .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 35vh;
    background-color: white;
    -ms-flex-item-align: end;
    align-self: flex-end;
    position: relative;
    -ms-flex-preferred-size: 24%;
    flex-basis: 24%; }
    .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner #multipleBoxesHeadlinerText {
      height: 30vh; }
    .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner p {
      position: absolute;
      left: 0;
      bottom: 0; }
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadlinerPic {
    height: 35vh;
    -ms-flex-preferred-size: 24%;
    flex-basis: 24%;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-right: 1%;
    background-image: url(../images/headlinerPic.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }

CSS媒体查询：

    @media screen and (max-width: 480px) {
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    margin: 0% 12% 1% 12%; }
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadlinerPic {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    margin: 1% 12% 0% 12%; } }

jQuery的：

    //Swap positions of two divs on window resize
    $(window).resize(function(){
        if($(window).width() <= 480){
            $("#multipleBoxesHeadliner").insertAfter("#multipleBoxesHeadlinerPic");   
        }
        else if($(window).width() >= 480){
            $("#multipleBoxesHeadlinerPic").insertAfter("#multipleBoxesHeadliner");
        }
    });

以下是两个显示正在发生的事情的GIF：

使用Chrome开发者工具：

不在常规浏览器窗口中工作：

任何人都知道造成这种情况的原因是什么？适用于所有浏览器。

使用的语言/工具：HTML / CSS / Javascript / jQuery / Bootstrap / SASS

Answer 1

滚动条。 window.width考虑包含滚动条的可见元素的宽度，而CSS媒体查询则排除它们。

尝试使用innerwidth代替

$(window).resize(function(){
    if($('body').innerWidth() <= 480){
        $("#multipleBoxesHeadliner").insertAfter("#multipleBoxesHeadlinerPic");   
    }
    else if($('body').innerWidth() >= 480){
        $("#multipleBoxesHeadlinerPic").insertAfter("#multipleBoxesHeadliner");
    }
});

请记住innerWidth只适用于body元素，如果你需要知道其他元素的内部宽度（例如，一些带有内部溢出滚动条的元素），你可以使用.prop("clientWidth")和{{1}而不是

Chrome开发者工具之外的CSS断点的死区

1 个答案: