响应式布局header变换

div+css布局时header头部如果是左右结构的话，当屏幕大小发生变化时，容易造成错位。响应式布局要让它适应屏幕的各个尺寸大小，只是单纯的变换logo图片的大小，字体的大小是不能完全自适应的。

一种方法是将导航条隐藏起来，如下图：

这里在实现的时候会出现一种情况，比如设置1300px为转折点。点击折叠的图标，菜单是展开的时候，这个时候改变浏览器的宽度，当浏览器宽度大于1300px，展开的菜单是不会自动消失的，会出现有两个菜单的情况。这里的解决方法是，随时监听浏览器的宽度，当宽度大于临界值的时候，手动给把菜单隐藏掉，代码如下：

window.onresize = function (){
        if($(window).width()>1320){
        $("#bar").css({"display":"none"})
    }
    }

onresize ：窗口大小发生变化时，就可执行函数