มาทำความรู้จักกับ Responsive กัน

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

Fluid Grid คือการออกแบบ Grid ให้เป็นแบบ Relative เป็นการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em

Flexible Images การกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม

CSS3 Media Queries จะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่าย