JavaScript - 当窗口低于 750px 时添加一个类；

Question

我正在使用 bootstrap 3，并且希望通过将 btn-sm 类添加到 anchor 上的类列表来使我的按钮下拉到 btn-sm。

这就是我正在尝试的。

(function ($) {
    var $window = $(window),
        $btn = $('btn');

    function resize() {
        if ($window.width() < 750) {
            return $btn.addClass('btn-sm');
        }

        $btn.removeClass('btn-sm');
    }

    $window.resize(resize)
        .trigger('resize');
})(jQuery);

到目前为止，它失败了。

Answer 1

只需使用 CSS 媒体查询，让浏览器完成艰苦的工作:

@media screen and (max-width: 749px) {
    .btn {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}