如何使用 jQuery CSS 方法傳遞媒體查詢

Question

我有一個這樣的媒體查詢：

@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

我需要改變風格，如：

 $( "#heightSet" ).change(function() {
              var choice = $(this).val();
              if (choice == "50"){
                $(".navbar-nav > li > a").css({"padding-top":"15px","padding-bottom":"15px"});
              }
                if (choice == "60"){
                $(".navbar-nav > li > a").css({"padding-top":"20px","padding-bottom":"20px"});
              }
});

我如何處理.CSS()上的@media (min-width: 768px) .CSS()以便代碼僅在該特定視口上受到影響？

Answer 1

.my-class-15 {padding-top: 15px; padding-bottom: 15px;}
.my-class-20 {padding-top: 20px; padding-bottom: 20px;}

$("#heightSet").change(function () {
    var choice = $(this).val();

    if (choice == "50") {
        $(".navbar-nav > li > a").addClass('my-class-15');
    }
    if (choice == "60") {
        $(".navbar-nav > li > a").addClass('my-class-20');
    }
});

這是一個小提琴，但如果沒有您的 HTML，它就不是很有用。

http://jsfiddle.net/isherwood/nf5tP/