การใช้งาน Media Query ยังมีข้อจำกัดอยู่ที่่ต้องการ Browser รุ่นใหม่ๆ
ซึ่งจะมี IE ที่ยังไม่ Support และยังมีผู้ใช้งานอยู่มาก
แต่เราสามารถที่จะใช้ jQuery มาใช้ในการจัดการแทน Media query ได้โดยเราสามารถหาความกว้างของ window ได้โดยใช้
นอกจากนั้นเรายังดักจับ event resize window ได้ด้วย $(window).resize(); เราสามารถจะเขียน Code ได้แบบนี้
|
$(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
ของเรา
ไม่มีความคิดเห็น:
แสดงความคิดเห็น