jquery - 将设备类添加到body w jquery

Question

有人可以帮帮我。我不知道为什么我不能让它工作:) 也许我只是累了。

无论如何，我想将boostrap3使用的类似类（col-sm，col-md，col-lg）添加到body中，但我认为宽度不能正常工作......

function body_classes() {

    var current_width = $(window).width();
    if (current_width < 481) $('body').addClass("body-sm").removeClass("body-md").removeClass("body-lg");
    else if (current_width < 992) $('body').addClass("body-md").removeClass("body-sm").removeClass("body-lg");
    else $('body').addClass("body-lg").removeClass("body-sm").removeClass("body-md");

}

Answer 1

您的代码工作正常，但请确保在 DOM 准备好后调用它。

我已经为任何来这里寻找此功能的人修复/更新了您的代码。

• 确保 DOM 已准备就绪
• 在浏览器调整大小时更新类
• 添加所有4 个Bootstrap 类
• 用一个空调用替换了removeClass()'es，这会删除所有类。

---

$(document).ready(function() {

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

    function addScreenWidthClasses() {
        if ($(window).width() < 768) 
            $('body')
                .removeClass()
                .addClass('screen-xs');
        else if ($(window).width() < 992) 
            $('body')
                .removeClass()
                .addClass('screen-sm');
        else if ($(window).width() < 1200) 
            $('body')
                .removeClass()
                .addClass('screen-md');
        else 
            $('body')
                .removeClass()
                .addClass('screen-lg');
    }
}