การใช้งาน 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 ของเรา