使用jquery将设备类添加到body

Question

有人能帮助我吗？我不知道为什么我不能让这个工作:)也许我只是累了。

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

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');
    }
}