Question

我正在尝试根据窗口大小添加和删除类并调整大小：

var windoSizing = function() {
    var $toggleClass;
    var $window = $(window);
    var $iconsContainer = $('.fragments-content > .icons-container');
    $toggleClass = ($window.width() > 769) ? $iconsContainer.addClass('mob-only') : $iconsContainer.removeClass('mob-only');
    $window.resize(function(event) {
        $toggleClass = ($window.width() > 769) ? $iconsContainer.addClass('mob-only') : $iconsContainer.removeClass('mob-only');
    });        
};

你认为有更好的方法吗？

Answer 1

使用CSS媒体查询为不同的屏幕尺寸而不是JS设置样式。

<style>
  .icons-container { /** general styles */ }

  @media(max-width: 769px) { 
    .icons-container { /** mobile styles */ }
  }
</style>

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

根据窗口大小添加和删除类

1 个答案: