วิธีเรียกใช้ CSS3 Media Queries

หลังจากที่ผมได้พูดถึง Media Queries ไปแล้ว ในบทความ media queries คืออะไร คราวนี้เราลองมาดูวิธีการเรียกใช้งาน Media Queries ซึ่งมีด้วยกัน 3 วิธี ได้แก่ วิธีเรียกด้วย HTML เรียกด้วย CSS ผ่าน @import rule และ วิธีเรียกด้วย CSS ผ่าน @media rule ซึ่งแต่ละวิธีก็จะมีวิธีเรียกใช้ที่ต่างกันเล็กน้อย ดังนี้ครับ

HTML, XHTML, XML

CSS @import rule

CSS @media rule

ซึ่งวิธีที่ผมแนะนำคือ @media rule ครับ เนื่องจากจะช่วยลดจำนวนไฟล์ที่จำเป็นต้องโหลดลงได้ ซึ่งจะมีผลต่อ Page Speed แต่วิธีนี้มีข้อเสียตรงที่ หากเว็บไซต์เรามีขนาดใหญ่ โค้ดของเราอาจซับซ้อนมาก จนทำให้ลำบากในการจัดการ ซึ่งเราอาจแก้ปัญหาโดยการแยกไฟล์ที่จะใช้ Media Queries ออกมาต่างหาก เช่น responsive.css เพื่อให้สะดวกในการแก้ไขครับ

ถึงตอนนี้ เพื่อนๆ คงใช้ Media Queries เป็นกันแล้วใช่มั้ยครับ บทความหน้า ผมจะมาเล่าว่า Media Queries นั้น มี Features อะไรให้เราใช้ได้บ้าง แล้วพบกันใหม่ครับ

(Visited 6,443 times, 1 visits today)

Leave a Reply