การแนะนำการจัดหน้าเว็บสำหรับหน้าจอต่างๆ ใน CSS

ในโลกสมัยใหม่ เว็บไซต์ควรแสดงผลได้ดี บนอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกัน

โดยทั่วไปแล้ว อุปกรณ์ถูกจัดแบ่งออกเป็นสี่ ประเภท ได้แก่ คอมพิวเตอร์ (desktop) แล็ปท็อป แท็บเล็ต (tablet) และ โทรศัพท์มือถือ (mobile)

เมื่อก่อน ในยุคโบราณ มีขนาดหน้าจอที่นิยม ของอุปกรณ์ทุกชนิดเป็นที่รู้จัก เนื่องจากมีไม่มากมายนัก และเว็บไซต์ถูกสร้าง ให้แสดงผลได้ถูกต้องบน รายชื่อความละเอียดที่ทราบกันดี

ในปัจจุบัน อุปกรณ์มีจำนวนมากขึ้นอย่างมาก จนเป็นไปไม่ได้ที่จะสร้างรายชื่อความละเอียด เพื่อทำเว็บไซต์รองรับ ปัจจุบันถือว่า การจัดหน้าเว็บควรแสดงผลได้ถูกต้อง บนหน้าจอขนาดใดก็ได้

สิ่งนี้ทำได้โดยการจัดเรียงบล็อกใหม่ที่จุดสำคัญ ของโครงหน้าเว็บ โดยที่จุดสำคัญเหล่านี้ ถูกเลือกไม่ใช่สำหรับอุปกรณ์เฉพาะ แต่สำหรับเนื้อหาของเว็บไซต์ - เพื่อให้ดู ดี

ระหว่างจุดสำคัญ ความกว้างขององค์ประกอบ เว็บไซต์ควรเป็นแบบลอยตัว เพื่อให้ปรับตัว ตามความกว้างของหน้าจอ และที่จุดสำคัญจะเกิด การจัดเรียงบล็อกใหม่ไปยังตำแหน่งอื่น

การจัดหน้าเว็บที่อธิบายไว้เรียกว่า แบบปรับตัว หรือ แบบตอบสนอง (responsive) เราจะศึกษาเรื่องนี้ใน บทเรียนต่อๆ ไป