Question

我想知道是否可以更改搜索框的位置，但仅限于手机..我尝试将id="search"放在包含input的框中：

    @media only screen and (max-width: 767px) { 


    #search
    {
        position:absolute;
        top: 0;
        width:90%;
        background: none repeat scroll 0 0 #ffffff;
    }


}

但似乎没有用。我希望搜索框位于标题的底部，但仅限于手机上。这可能吗？

Answer 1

在工作中我们使用JavaScript＆amp; jQuery在不同的屏幕尺寸上移动一个元素，如下所示：

function moveMenu(){
    if($(window).width() < 767){
        // If the screen is less than 767, move the menu to mobile position 
        $('#menu-header').prependTo('#mobile-menu-wrapper');
    }
    else {
        // Otherwise, put it in the normal location
        $('#menu-header').prependTo('#header-menu-wrapper');
    }
}

重要的是，如果有人在小屏幕上加载页面，则将其大小调整为此函数运行的大小。所以我们还添加这两个位以在页面加载和页面调整大小时触发它：

$(window).resize(function(){
    moveMenu();
});

$(window).load(function(){
    moveMenu();
});

这种方法意味着您不必将菜单复制到“重排”状态。页面。

Answer 2

在中心区块中添加另一个搜索框
将其隐藏在桌面上并在

更新：固定位置将起作用，但不允许使用其他元素

代码是这样的

#search1 {
  display: block;
}
#search2 {
  display: none;
}
@media only [....] {
  #search1 {
    display: none;
  }
  #search2 {
    display: block;
  }
}

仅在手机上更改盒子的位置？

2 个答案: