jquery, thêm/xóa lớp khi chiều rộng cửa sổ thay đổi

Question

Tôi đã viết một kịch bản rất cơ bản để thêm/xóa lớp khi tải hoặc khi cửa sổ được thay đổi kích thước.

Tôi đã tự hỏi liệu có cách nào tốt hơn để thực hiện việc này hoặc nếu có thể giảm dòng mã.

Về cơ bản, tôi muốn có thể thay đổi kiểu khi trang web được xem trên màn hình nhỏ hơn. Tôi nghĩ tốt nhất là nên thêm một lớp mới vào thẻ html khi nó ở dưới một độ rộng nhất định ...

Anyways đây là mã của tôi.

<script type="text/javascript"> 
$(document).ready(function() { 
    /* Check width on page load*/ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {} 
}); 

$(window).resize(function() { 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
}); 

Cảm ơn

Gillian

lớp

Answer 1

function resize() { 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
} 

$(document).ready(function() { 
    $(window).resize(resize); 
    resize(); 
}); 

Answer 2

Sử dụng Media

@media screen and (max-width: 900px) { 
    .class { 
    width:800px; 

    } 
} 

@media screen and (max-width: 500px) { 
     .class { 
     width:450px; 

    } 
} 

Answer 3

Trước hết, DRY (Do not Repeat Yourself) mã của bạn bằng cách sử dụng một hàm:

function checkWidth(init) 
{ 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
     $('html').addClass('mobile'); 
    } 
    else { 
     if (!init) { 
      $('html').removeClass('mobile'); 
     } 
    } 
} 

$(document).ready(function() { 
    checkWidth(true); 

    $(window).resize(function() { 
     checkWidth(false); 
    }); 
}); 

Answer 4

Vâng, tôi biết tôi đã đến muộn bữa tiệc, nhưng tôi thấy một số thứ như $(document).ready() không thực sự cần thiết.

Hãy thử lưu bộ nhớ cache của bạn nếu bạn đang gọi chúng lặp đi lặp lại, một la var $window = $(window); Điều này sẽ giúp hiệu suất. Tôi sử dụng một biểu thức chức năng để đóng gói để tôi ở ngoài phạm vi toàn cầu nhưng vẫn có quyền truy cập vào các phần tử được chọn trong bộ nhớ jQuery $window và $html được lưu trong bộ nhớ cache của mình.

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

    $window.resize(function resize(){ 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    }).trigger('resize'); 
})(jQuery); 

http://jsfiddle.net/userdude/rzdGJ/1

Có lẽ một chút bụi, chút dễ dàng hơn để làm theo:

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

    function resize() { 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    } 

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

http://jsfiddle.net/userdude/rzdGJ/2

Answer 5

Vấn đề này quấy rầy tôi trong một thời gian, trên thực tế. Tôi thường có nhiều kích thước cho quá trình chuyển đổi. Tôi viết này một suy nghĩ tôi muốn chia sẻ:

$(function() { 
    var pageTransitions = [['full',1600],['mobile',800],['tiny',400],['micro',0]]; // number shows minimum size - must be from high to low 
    function resize() { 
    var target = 0, 
     w = $(window).width(), 
     h = $('html'); 
    $.each(pageTransitions, function(index, pageTransition) { 
     if(w > pageTransition[1]) { 
      target = index; 
      return false; 
     } 
    }); 
    $.each(pageTransitions, function(index, pageTransition) { 
     h.removeClass(pageTransition[0]); 
    }); 
    h.addClass(pageTransitions[target][0]); 
    } 
    resize(); 
    jQuery(window).on('resize', function() { 
    resize(); 
    }); 
}); 

http://jsfiddle.net/mckinleymedia/ERZ3q/7/

Answer 6

Bạn cũng có thể sử dụng phương pháp này, tôi nghĩ rằng nó rất rõ ràng để làm theo:

$(window).on('resize', function(){ 
     var win = $(this); 
     if (win.width() < 514) { 

     $('html').addClass('mobile'); 

     } 
    else 
    { 
     $('html').removeClass('mobile'); 
    } 

}); 

Simple Method