ยุคอนาคตของการทำ Responsive มาแล้วครับ
ยุคอนาคตของการทำ Responsive มาแล้วครับ 😀
.
ตอนนี้เราใช้ CSS3 Media Queries เพื่อทำเว็บไซต์ Responsive กัน (หรือบางคนอาจจะบอกว่าใช้ CSS Framework เช่น Bootstrap / Foundation etc. พวกนี้ก็ Media Queries นั่นเองครับ)
.
ถ้าใครทำเว็บไซต์ Responsive บ่อย ๆ จะเจอปัญหาว่าใน Media Query เรากำหนดหน้าตาของ Element โดยอิงจาก “ความกว้างของหน้าจอ”
.
ทั้งที่จริง ๆ แล้วหน้าตาของ Element มันควรจะเปลี่ยนตาม “ขนาดของ Element” ในขณะนั้นไม่ใช่เหรอ ?
.
.
เลยมีคนทำ JavaScript เพื่อให้เราเขียน CSS สำหรับ Responsive ตามขนาดจริงของ Element ณ ขณะนั้นขึ้นมา ชื่อว่า EQCSS.js
.
แอดมินคิดว่าน่าสนใจมากกกก เพราะแนวคิดนี้ดูถูกต้องกว่า Media Queries มากครับ เนื่องจากบางครั้งเราก็อยากเอา Element โยนเข้าไปแบบเต็มความกว้างจอ หรือในบางจุดเราอาจจะวาง Element นี้แค่ 1/3 ของหน้าจอก็ได้
.
ลองไปโหลดมาเล่นกันดูเลยที่: http://elementqueries.com/
.
คำเตือน: EQCSS จะเรนเดอร์หน้าเว็บด้วย JS นะครับ เพราะงั้นจะช้ากว่า Media Queries ที่เป็น Native เรนเดอร์ผ่านบราวเซอร์ได้เลยนิดนึง