Javascript 我需要根据窗口大小调整我的搜索栏大小，我需要为搜索栏大小调整代码制作一个函数

我想使用获取屏幕大小的代码和调整搜索栏大小的代码。目前，它所做的只是以最大的分辨率调整搜索栏的大小。下面是一个例子的链接。您需要不断更改分隔符的大小，并以不同的大小运行代码，以查看差异，这就是问题所在，但我只是认为我应该提到它

此代码获取屏幕大小：

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

此代码提供了调整窗口大小时的大小：

$(document).ready(function(){
    $(window).resize(function(){
      window.x = x;
   });
});

此代码根据屏幕大小重新调整搜索栏的大小。我需要把这段代码放在一个函数中，这样我就不会一直重复使用代码

if (window.x >= 1200) {

    $('#search_bar_box').focus(function () {
        $(this).animate({
            width: '600px'
        }, 500, function () {
            // Animation complete.
        });
    });

    $('#search_bar_box').blur(function () {
        $(this).animate({
            width: '100%'
        }, 0.1, function () {
            // Animation complete.
        });
    });

} else if (window.x >= 992 && window.x < 1200) {

    $('#search_bar_box').focus(function () {
        $(this).animate({
            width: '350px'
        }, 500, function () {
            // Animation complete.
        });
    });

    $('#search_bar_box').blur(function () {
        $(this).animate({
            width: '100%'
        }, 0.1, function () {
            // Animation complete.
        });
    });

} else if (window.x >= 768 && window.x < 992) {

    $('#search_bar_box').focus(function () {
        $(this).animate({
            width: '100px'
        }, 500, function () {
            // Animation complete.
        });
    });

    $('#search_bar_box').blur(function () {
        $(this).animate({
            width: '100%'
        }, 0.1, function () {
            // Animation complete.
        });
    });

} else {
    //default
}

if（window.x>=1200）{
$（'#搜索栏\框'）。焦点（函数（）{
$（此）。设置动画({
宽度：“600px”
}，500，函数（）{
//动画完成。
});
});
$（'#搜索栏\框'）.blur（函数（）{
$（此）。设置动画({
宽度：“100%”
}，0.1，函数（）{
//动画完成。
});
});
}否则如果（window.x>=992&&window.x<1200）{
$（'#搜索栏\框'）。焦点（函数（）{
$（此）。设置动画({
宽度：“350px”
}，500，函数（）{
//动画完成。
});
});
$（'#搜索栏\框'）.blur（函数（）{
$（此）。设置动画({
宽度：“100%”
}，0.1，函数（）{
//动画完成。
});
});
}否则如果（window.x>=768&&window.x<992）{
$（'#搜索栏\框'）。焦点（函数（）{
$（此）。设置动画({
宽度：“100px”
}，500，函数（）{
//动画完成。
});
});
$（'#搜索栏\框'）.blur（函数（）{
$（此）。设置动画({
宽度：“100%”
}，0.1，函数（）{
//动画完成。
});
});
}否则{
//违约
}

您需要在窗口

resize（）

事件上执行搜索栏调整大小代码，这就是我让代码工作的原因。请参见此Jsiffle：

---

您能提供一个JSFIDLE吗？因为window.x将要更改，所以您需要在focus/blur函数中设置if-else条件。此外，我认为这可以在纯css3（媒体查询、转换）中完成。您需要不断更改分隔符的大小，并以不同的大小运行代码以查看差异。[link]@Andrew-我需要一个兼容所有浏览器（包括其他设备）的解决方案。

$(document).ready(function () {
    $(window).resize(function () {
        /* winWidth() is the function for getting the screen size. 
           set() is the function that handles the search bar resize and
           accepts the argument value for 'x'             
        */
        set(winWidth());
    }).trigger('resize');
});