问css媒体查询向HTML添加类

EN

<li class="bigScreen"><a href=""><i class="fa fa-iconname"></i>Link Name</a></li>

<li class="smallScreen"><a href=""><i class="fa fa-iconname lg-2x"></i>Link Name</a></li>

@media (max-width: 1000px) {
  .bigScreen {
    display:none;
  }
  .smallScreen {
    display:block;
  }
}

@media (min-width: 1001px) {
  .bigScreen {
    display:block;
  }
  .smallScreen {
    display:none;
  }
}

@media (max-width: 1000px) {
    .fa-iconname {
    font-size: 2em;
    }
} 

$( window ).resize(function() {
    if($(window).width() <=1000) {
        $('i').toggleClass(function() {
           if ( $( this ).is( ".lg-2x" ) ) {
               console.log("class already there good to go");
           } else {
              $( this ).addClass("lg-2x");
           }
        }
    }else{
           $('i').removeClass("lg-2x");
    }

});