Thay thế các bảng định kiểu với jQuery tùy thuộc vào kích thước màn hình

Question

Xin chào, tôi có muốn tạo một trang web đáp ứng bằng jQuery hay không (làm theo cách này vì đối tượng đích là trên IE7/8 và css3-mediaqueries .js dường như can thiệp vào giao diện người dùng jQuery mà tôi cũng đang sử dụng). Tôi đang sử dụng tập lệnh sau để phát hiện chiều rộng và chiều cao và áp dụng kiểu cho phù hợp, nó hoạt động tốt cho chiều rộng chứ không phải chiều cao, nó tải SMstyle.css rồi ghi đè theo kiểu style.css. Tôi đang cố gắng học JavaScript nhưng không phải siêu mạnh vào lúc này, tôi biết có một cách dễ dàng hơn! Bất kỳ trợ giúp sẽ được đánh giá cao ...

function adjustStyle(width) { 
     width = parseInt(width); 
     if ((width >= 701) && (width < 1200 
     )) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).width()); 
     $(window).resize(function() { 
      adjustStyle($(this).width()); 
     }); 
    }); 

    function adjustStyle(height) { 
     height = parseInt(height); 
     if (height < 800 
     ) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).height()); 
     $(window).resize(function() { 
      adjustStyle($(this).height()); 
     }); 

    }); 

Answer 1

Khi giao dịch với bố trí đáp ứng, bạn không thực sự quan tâm đến chiều cao. Khái niệm toàn bộ là nếu nội dung không thể phù hợp với chiều rộng, nó sụp đổ (và do đó làm tăng chiều cao).

EDIT:

Tôi tin rằng bạn cần phải sử dụng $ (document) thay vì $ (this), vì phạm vi $ (this) sẽ khác nhau khi bạn kích hoạt nó bằng tay và khi được kích hoạt bởi một sự kiện thay đổi kích thước.

function adjustStyle() { 
    var width = $(document).width(); 
    var height = $(document).height(); 
    if (((width >= 701) && (width < 1200)) || (height < 800)) { 
     $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
    } else { 
     $("#size-stylesheet").attr("href", "css/style.css"); 
    } 
} 

adjustStyle(); 
$(window).resize(function() { 
    adjustStyle(); 
}); 

Để xem các phạm vi khác nhau, hãy thử này:

$(function() { 
    console.log('Scope', $(this)); // Scope is DOM-element 
    $(window).resize(function() { 
     console.log('Scope', $(this)); // Scope is Window object. 
    }); 
}); 

Answer 2

refactored (chưa được kiểm tra)

function adjustStyle(width, height) { 
    width = parseInt(width); 
    height = parseInt(height); 
     if (((width >= 701) && (width < 1200)) || (height < 800)) 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     else 
      $("#size-stylesheet").attr("href", "css/style.css"); 
} 

$(function() { 
    adjustStyle($(this).width(), $(this).height()); 
    $(window).resize(function() { 
     adjustStyle($(this).width(), $(this).height()); 
    }); 
});