jquery - jQuery在小于宽度时调整大小

Question

因此，当我的带有 Bootstrap 3 框架的网站进入移动视图（.container 上 <750px）时，我正在尝试制作一个 jQuery 函数来将 div 更改为基本上向左浮动。

$(function() {

    var container_width_checker = $('.container').css(width);

    var container_width = function(){

        if (container_width_checker < 750px ) { 
            $('.accountcustom').css({ 'float': 'none', 'padding-left': '10px', });
            $('#shopping_cart a').css({ 'float': 'none', 'padding-left': '10px', });
        } else {
            $('.accountcustom').css({ 'float': 'right', }); 
            $('#shopping_cart a').css({ 'float': 'right', });
        }   
    };

    container_width();

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

});

我是否使用 resize jQuery 函数正确地解决了这个问题？

Answer 1

您在正确的轨道上，但container_width_checker需要在每次调整大小时进行计算。照原样，它只计算一次。

if ($('.container').width() < 750) { 

但是，最好改为查看媒体查询。

Answer 2

使用.width()将允许您使用纯数值而不是测量单位。

$(function() {
    var container_width = function(){
        var container_width_checker = $('.container').width();
         if (container_width_checker < 750 ) { 
            $('.accountcustom').css({ 'float': 'none', 'padding-left': '10px', });
            $('#shopping_cart a').css({ 'float': 'none', 'padding-left': '10px', });
        } else {
            $('.accountcustom').css({ 'float': 'right', }); 
            $('#shopping_cart a').css({ 'float': 'right', });
        }   
    };
    container_width();
    $(window).resize(function() {
         container_width();
    });
});

Answer 3

我建议你看看 CSS 媒体查询并离开 jQuery。

这里有一些额外的信息：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries