การใช้ jquery แทน media query

การใช้งาน Media Query ยังมีข้อจำกัดอยู่ที่่ต้องการ Browser รุ่นใหม่ๆ
ซึ่งจะมี IE ที่ยังไม่ Support และยังมีผู้ใช้งานอยู่มาก
แต่เราสามารถที่จะใช้ jQuery มาใช้ในการจัดการแทน Media query ได้โดยเราสามารถหาความกว้างของ window ได้โดยใช้

1
$(window).width()

นอกจากนั้นเรายังดักจับ event resize window ได้ด้วย $(window).resize(); เราสามารถจะเขียน Code ได้แบบนี้

1
2
3
4
5
6
7
8
9
10
$(window).resize(function(){
     var width = $(window).width();
     if(width > 760){
         $('h1').attr('class','web');
     }else if(width > 480 ){
         $('h1').attr('class','tablet');
     }else if(width > 0){
         $('h1').attr('class','mobile');
     }
});

ที่ใช้ .attr แทน addClass เพราะจะได้ replace Class ทั้งหมด แต่ถ้าเราต้องการ เพิ่ม Class เข้าไปซึ่งส่วนใหญ่ในงานจริงเป็นแบบนั้น เราจะใช้ addClass แทน อันนี้จะขึ้นอยู่กับรูปแบบการเขียน Stylesheet ของเรา